Works across tabs, but not within a single tab

[raiskila]

Hi,

While the storage event is fired when another page modifies local storage, it's not fired when the current page modifies local storage. Thus two components on the same page using this hook won't stay in sync. Demo codesandbox

The setState function should probably also be wrapped in useCallback to prevent its reference identity from changing on every render. This is consistent with the setter returned by useState and the dispatch function returned by useReducer, and allows for things like passing the function down in React context without causing components downstream to update constantly.

[nwalters512]

Yeah, it's unfortunate the localStorage API works that way. Do you have any thoughts on how to account for that? We could probably fire our own event within the window.

Good suggestion regarding useCallback, would definitely accept a PR with that implemented.

[raiskila]

I opened a PR about the useCallback change.

I used a CustomEvent to solve the event issue in a version of this hook I wrote some time ago, but unfortunately CustomEvent requires a polyfill in IE. I'm not sure what would be the most "clean" way to do this cross-browser.

[nwalters512]

I'm not super concerned about IE - I'd be fine saying "you have to polyfill if you want to support IE". Could even include it by default, though I'm not thrilled about that. We could also just do things "the old-fashioned way".