Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#2,604 0 commenti 3 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
55/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start with src/useSessionStorage.ts around the useEffect at line 40, then reproduce the same-key behavior using the linked CodeSandbox. The issue is done when updating one hook instance leaves the new value in sessionStorage instead of letting the other instance restore the old value.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
TypeScript
Stelle
44k
Fork
3.3k
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di streamich/react-use

Tutte le issue di streamich/react-use

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.