Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#2,604 0 bình luận 3 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
55/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
TypeScript
Star
44k
Fork
3.3k
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của streamich/react-use

Tất cả issue của streamich/react-use

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.