Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#2,604 0 comentarios 3 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
55/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
TypeScript
Estrellas
44k
Forks
3.3k
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de streamich/react-use

Todos los issues de streamich/react-use

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.