fix: change useStateStore to use useSyncExternalStore instead #2573
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
arnautov-anton
requested review from
oliverlaz,
myandrienko,
isekovanic and
MartinCupela
|
Size Change: +1.49 kB (+0.13%) Total Size: 1.17 MB
ℹ️ View Unchanged
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #2573 +/- ##
==========================================
+ Coverage 82.95% 82.98% +0.02%
==========================================
Files 444 444
Lines 9222 9237 +15
Branches 2254 2258 +4
==========================================
+ Hits 7650 7665 +15
Misses 1239 1239
Partials 333 333 ☔ View full report in Codecov by Sentry. |
arnautov-anton
force-pushed
the
fix/use-sync-external-store
branch
from
d9b6440 to
2a7f072
Compare
arnautov-anton
force-pushed
the
fix/use-sync-external-store
branch
from
897e7fd to
eb4d195
Compare
myandrienko
reviewed
Dec 9, 2024
src/store/hooks/useStateStore.ts
Outdated
| @@ -1,7 +1,10 @@ | |||
| import { useEffect, useState } from 'react'; | |||
| import { useCallback, useMemo, useSyncExternalStore } from 'react'; | |||
There was a problem hiding this comment.
To support older React versions, it's better to use the use-sync-external-store/shim package. It also has a useSyncExternalStoreWithSelector helper hook which will do selector and selection memoization for you.
There was a problem hiding this comment.
Thank you, I'll use the shim but the one with selector still requires you to provide a comparator for the selected values so I'll keep it the way it is as it seems that re-writing it to fit the other API would yield similar results - or as would James Franco say:
arnautov-anton
force-pushed
the
fix/use-sync-external-store
branch
from
442c7c7 to
1c36b8c
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎯 Goal
Changing stores on the fly would keep previously calculated state for a bit before the effect would run to recalculate it - using
useSyncExternalStore(thank you, @myandrienko) should alleviate this issue. BothsubscribeandgetSnapshotfunctions required by the React hook are wrapped to allow for selector functionality,geSnapshotrequires the output to be cached so the wrapper reuses similar cache check mechanism assubscribeWithSelectordoes internally.