useLocalStorage not updating if many components watch the same key

[TylerR909]

Note: I'm already working on a PR for this.

What is the current behavior?
Multiple calls to useLocalStorage('myKey') from different components are not staying in sync as the value changes.

Steps to reproduce it and if possible a minimal demo of the problem.

Seems that all the Sandboxes are failing to install react-use right now but slap this somewhere and the problem will become apparent:

import useLocalStorage from 'react-use/lib/useLocalStorage';

const Increment = () => {
  const [count, setCount] = useLocalStorage('count', 0);
  return (<h1 onClick={() => setCount(count+1)}>Increment</h1>);
}

const Decrement = () => {
  const [count, setCount] = useLocalStorage('count', 0);
  return (<h1 onClick={() => setCount(count-1)}>Decrement</h1>);
}

const App = () => (
  <>
    <Increment />
    <Decrement />
  </>
)

Basically it's initializing from localStorage into individual instances of useState and then never reading from localStorage again, so if it's changed out from under you... (1) you never see the update and (2) if you update it you clobber whatever was there before.

What is the expected behavior?

If my localStorage value changes, all my components watching that value pick up the change.

[nicgirault]

Any news on this issue? The problem is still here. Could I help making this fix released? Here is a sandbox reproducing the problem: https://codesandbox.io/s/peaceful-hopper-l3ksy?file=/src/App.tsx

[TylerR909]

Looks like it got merged into v14.0 which isn't on master yet. But is also 75 commits ahead, 121 commits behind master.

Also the unit test that specifically checks against this ticket is commented out. https://github.com/streamich/react-use/blob/v14.0/tests/useLocalStorage.test.ts#L86

[gimbo]

Dang. I was hoping to replace a use of https://github.com/astoilkov/use-local-storage-state with this. Guess I won't be doing that.

[xobotyi]

If anyone interested it is implemented in upcoming hook of @react-hookz/web react-hookz/web#43

[gimbo]

Nice one @xobotyi — when I saw your comment at first (not knowing who you were) I thought "oh dear, somebody with yet another hook library promoting it here instead of contributing" but then I looked into it and saw what you're doing with react-hooks/web and your long history with react-use, and your reasons for leaving/starting afresh there. I'll definitely give react-hooks a try, and I expect I'll be eagerly watching its growth. Unfortunately my JS/TS expertise is more "consumer" than "contributor", else I'd get involved — hope you get the support you need!

[bertho-zero]

This hook remains unusable except in simple cases.

[dsgriffin]

There are still issues with this hook not syncing correct values when watching the same key in multiple components

[warbler9000]

Here looking at this in 2023 and it's still not resolved. Having to use https://github.com/astoilkov/use-local-storage-state instead. Please fix this issue or remove the functionality.

[alexgorbatchev]

This hook is still broken, there's no getItem anywhere in the source, so it never syncs with the localStorage values.