useSessionStorage persists existing value when multiple instances with the same key are rendered at once
まだ誰も着手していません。
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 55/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
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.
索引モデルが issue の本文から書いたものです。
説明
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
- 主要言語
- TypeScript
- スター
- 44k
- フォーク
- 3.3k
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
streamich/react-use のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
-
Add Generic Fn for useDebounce対応中かも @itsmejay80 が 191 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 64/100
-
useVideo.story.tsx - sampleVideo can not be loaded再び着手できるかも このイシューのプルリクエストはマージされずにクローズされました。 オープン
難易度 1/5 1時間未満 初心者へのやさしさ 62/100
-
useSlider: event callbacks are not updated対応中かも @erykpiast が 1838 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
streamich/react-use の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
simkimsia/netlify-axi#19 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
subhranshudash13-dotcom/Contribo#74 ·
メンテナーはふだん 1 日以内に返信
-
enhancement frontend good first issue Stellar Wave trivial
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
Godgift-care/sci-healthcare-frontend#166 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
backend good first issue security Stellar Wave trivial
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
Godgift-care/sci-healthcare-backend#171 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信