[useSES/extra] Reuse old selection if possible #22307
Merged
+114
−1
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
When you pass an unmemoized selector to useSyncExternalStoreExtra, we have to reevaluate it on every render because we don't know whether it depends on new props. However, after reevalutating it, we should still compare the result to the previous selection with `isEqual` and reuse the old one if it hasn't changed. Originally I did not implement this, because if the selector changes due to new props or state, the component is going to have to re-render anyway. However, it's still useful to return a memoized selection when possible, because it may be the input to a downstream memoization. In the test I wrote, the example I chose is selecting a list of items from the store, and passing the list as a prop to a memoized component. If the list prop is memoized, we can bail out.
facebook-github-bot
added
CLA Signed
React Core Team
|
Comparing: 33226fa...c99f5ea Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
acdlite
force-pushed
the
use-ses-compare-to-rendered
branch
from
b9f4f62 to
c99f5ea
Compare
rickhanlonii
approved these changes
Sep 13, 2021
gaearon
reviewed
Sep 13, 2021
| Scheduler.unstable_yieldValue('Inline selector'); | ||
| return [...state.items, 'C']; | ||
| }; | ||
| const items = useSyncExternalStoreExtra( |
|
FYI, the shim can't actually use the built-in version atm, because it's not looking for the
And, uh... for that matter it's not even being exported from |
|
Just following up: that issue was fixed, and we're checking for unstable now. |
facebook-github-bot
pushed a commit
to facebook/react-native
that referenced
this pull request
Sep 22, 2021
Summary: This sync includes the following changes: - **[f4ac680c7](facebook/react@f4ac680c7 )**: Fixed broken build script --unsafe-partial flag ([#22324](facebook/react#22324)) //<Brian Vaughn>// - **[67222f044](facebook/react@67222f044 )**: [Experiment] Warn if callback ref returns a function ([#22313](facebook/react#22313)) //<Dan Abramov>// - **[263cfa6ec](facebook/react@263cfa6ec )**: [Experimental] Add useInsertionEffect ([#21913](facebook/react#21913)) //<Ricky>// - **[806aaa2e2](facebook/react@806aaa2e2 )**: [useSES shim] Import prefixed native API ([#22310](facebook/react#22310)) //<Andrew Clark>// - **[fd5e01c2e](facebook/react@fd5e01c2e )**: [useSES/extra] Reuse old selection if possible ([#22307](facebook/react#22307)) //<Andrew Clark>// - **[33226fada](facebook/react@33226fada )**: Check for store mutations before commit ([#22290](facebook/react#22290)) //<Andrew Clark>// - **[86c7ca70a](facebook/react@86c7ca70a )**: Fix link ([#22296](facebook/react#22296)) //<Konstantin Popov>// - **[0fd195f29](facebook/react@0fd195f29 )**: update error message to include useLayoutEffect or useEffect on bad e… ([#22279](facebook/react#22279)) //<salazarm>// - **[8f96c6b2a](facebook/react@8f96c6b2a )**: [Bugfix] Prevent infinite update loop caused by a synchronous update in a passive effect ([#22277](facebook/react#22277)) //<Andrew Clark>// - **[4ce89a58d](facebook/react@4ce89a58d )**: Test bad useEffect return value with noop-renderer ([#22258](facebook/react#22258)) //<Sebastian Silbermann>// - **[a3fde2358](facebook/react@a3fde2358 )**: Detect subscriptions wrapped in startTransition ([#22271](facebook/react#22271)) //<salazarm>// Changelog: [General][Changed] - React Native sync for revisions 95d762e...e8feb11 jest_e2e[run_all_tests] Reviewed By: rickhanlonii Differential Revision: D30966369 fbshipit-source-id: 6c88e591005deb1fd93493628ef4695add49186c
zhengjitf
pushed a commit
to zhengjitf/react
that referenced
this pull request
Apr 15, 2022
When you pass an unmemoized selector to useSyncExternalStoreExtra, we have to reevaluate it on every render because we don't know whether it depends on new props. However, after reevalutating it, we should still compare the result to the previous selection with `isEqual` and reuse the old one if it hasn't changed. Originally I did not implement this, because if the selector changes due to new props or state, the component is going to have to re-render anyway. However, it's still useful to return a memoized selection when possible, because it may be the input to a downstream memoization. In the test I wrote, the example I chose is selecting a list of items from the store, and passing the list as a prop to a memoized component. If the list prop is memoized, we can bail out.
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.
When you pass an unmemoized selector to useSyncExternalStoreExtra, we have to reevaluate it on every render because we don't know whether it depends on new props.
However, after reevalutating it, we should still compare the result to the previous selection with
isEqualand reuse the old one if it hasn't changed.Originally I did not implement this, because if the selector changes due to new props or state, the component is going to have to re-render anyway. However, it's still useful to return a memoized selection when possible, because it may be the input to a downstream memoization.
In the test I wrote, the example I chose is selecting a list of items from the store, and passing the list as a prop to a memoized component. If the list prop is memoized, we can bail out.