Having multiple Providers stops an atomWithStorage from syncing changes within the same tab

[Zache]

Bug Description

When using atomWithStorage the expected behavior is that any changes to the value of the atom is stored to the backing storage, and that any and all uses of the atom (via useAtom or useAtomValue) would be updated with the new value from storage via the storage events.

This works for cross-tab synchronization, but not same-tab if the atoms are used under different Providers.

I would expect it to synchronize via storage also within the same tab, even if the atoms are used with different jotai stores

Looking for similar issues I found: #2881 which seem to support my interpretation

Reproduction Link

https://codesandbox.io/p/sandbox/wyxzpw

[dai-shi]

Thanks for reporting.

Your sandbox uses the default storage, which uses 'storage' event. Maybe storage event doesn't fire in the same window.

Our general suggestion is not to rely on it for the same window, because there should be a better way within the same memory.
If you really want, you could create your own storage, if the said behavior is the root cause.
The default storage is like a fallback, whose usage should be more discouraged in general.

All that said, there might be a bug in atomWithStorage lib code. Feel free to dig into it.

[Zache]

I updated my example to use createJSONStorage but that shouldn't do much since that is the default storage. What did clue me in to what is happening was adding

  useEffect(() => {
    const listener = (e) => {
      console.log(e);
    };
    window.addEventListener("storage", listener);

    return () => {
      window.removeEventListener("storage", listener);
    };
  }, []);

And it showed me that the events were only raised in the other browser windows/tabs not in the one I clicked the checkboxes in, this is true for both atoms both the ones using the same store and the ones that doesn't.

A quick look at MDN shows me that what I expected to happen was never going to be:

The StorageEvent interface is implemented by the storage event, which is sent to a window when a storage area the window has access to is changed within the context of another document.

Which is a bit inconvenient for what I need to implement, but should be easy to solve in another way.