useSessionStorage persists existing value when multiple instances with the same key are rendered at once

[OzzieOrca]

What is the current behavior? If you call useSessionStorage with the same storage key twice in the same render tree and call the set state function, it won't persist the new value to session storage (but will have the new value in the local state for that hook until the page is refreshed) . When using a JS debugger, there appears to be a race condition of the hook with the updated value trying to persist the updated value and the other hook trying to persist the old value. There is a useEffect without dependencies that updates session storage on every render, regardless if the value has changed.

I discovered this when I was using this hook in a parent component and tried to to update the value inside a child component with a second call to the hook. I've written a custom hook that shares the state using context so the multiple hooks have the value synced but the new value wasn't making it to session storage. I got it working for now by passing the setState function as a prop to the child instead of calling the hook a second time. Just want to save someone else from encountering this and having it not work as intended.

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below: See https://codesandbox.io/p/sandbox/cgn3kf for detailed steps and example

const [sessionStorageValue, setSessionStorageValue] = useSessionStorage(
  sessionStorageKey,
  0
);

// This line causes the bug. There seems to be a race condition for setting the session storage value. If this hook is moved above the first one, it works as intended.
const [sessionStorageValue2] = useSessionStorage(sessionStorageKey, 0);

When having multiple instances of the useSessionStorage with the same key, calling setSessionStorageValue never updates the value in session storage as the second hook overrides the update and changes it back to the old value.

What is the expected behavior? Even if the hook instances don't sync with each other, if one of them tries to persist a new value, that hook should win.

I think this can be fixed by adding a dependency array of [state] at https://github.com/streamich/react-use/blob/master/src/useSessionStorage.ts#L40 to the useEffect that is calling sessionStorage.setItem. I can submit a PR if that seems like a good solution that won't have unintended consequences.

My CodeSandbox linked above has a copy of the hook named useSessionStorageFixed that includes this dependency array fix and can be used to replace the useSessionStorage calls in the main component and it seems to fix this issue.

A little about versions:

• OS: Ubuntu 24.04.1 LTS
• Browser (vendor and version): Google Chrome Version 130.0.6723.116 (Official Build) (64-bit)
• React: 18.2.0
• react-use: 17.5.1
• Did this worked in the previous package version? Probably not, the source code for this hook doesn't seem like it's changed in 3 years based on the last commit to https://github.com/streamich/react-use/blob/master/src/useSessionStorage.ts