Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove state queue from useSyncExternalStore #22265

Merged
merged 1 commit into from
Sep 7, 2021

Conversation

acdlite
Copy link
Collaborator

@acdlite acdlite commented Sep 7, 2021

Based on #22239

The userspace shim of useSyncExternalStore uses a useState hook because it's the only way to trigger a re-render. We don't actually use the queue to store anything, because we read the current value directly from the store.

In the native implementation, we can schedule an update on the fiber directly, without the overhead of a queue.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Sep 7, 2021
@acdlite acdlite force-pushed the use-ses-no-state-queue branch 2 times, most recently from 4e99ad2 to 12c2256 Compare September 7, 2021 16:46
@sizebot
Copy link

sizebot commented Sep 7, 2021

Comparing: 06f98c1...220d6df

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 128.29 kB 128.23 kB +0.02% 40.91 kB 40.91 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 131.11 kB 131.05 kB = 41.84 kB 41.84 kB
facebook-www/ReactDOM-prod.classic.js = 407.38 kB 407.02 kB = 75.39 kB 75.38 kB
facebook-www/ReactDOM-prod.modern.js = 395.94 kB 395.58 kB = 73.68 kB 73.67 kB
facebook-www/ReactDOMForked-prod.classic.js = 407.38 kB 407.02 kB = 75.40 kB 75.39 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 220d6df

Copy link
Member

@rickhanlonii rickhanlonii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM - Are there any tests we should write that would exercise the difference between the shim and the native implementation?

if (!didWarnUncachedGetSnapshot) {
if (nextSnapshot !== getSnapshot()) {
console.error(
'The result of getSnapshot should be cached to avoid an infinite loop',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a test for this?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah @salazarm added one in #22262

The userspace shim of useSyncExternalStore uses a useState hook because
it's the only way to trigger a re-render. We don't actually use the
queue to store anything, because we read the current value directly
from the store.

In the native implementation, we can schedule an update on the fiber
directly, without the overhead of a queue.
@acdlite
Copy link
Collaborator Author

acdlite commented Sep 7, 2021

Are there any tests we should write that would exercise the difference between the shim and the native implementation?

Not yet, going to add when I implement this:

// TODO: Move the tearing checks to an earlier, pre-commit phase so that the
// layout effects always observe a consistent tree.

@acdlite acdlite merged commit 8e80592 into facebook:main Sep 7, 2021
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Sep 11, 2021
Summary:
This sync includes the following changes:
- **[95d762e40](facebook/react@95d762e40 )**: Remove duplicate test //<Andrew Clark>//
- **[d4d1dc085](facebook/react@d4d1dc085 )**: Reorder VARIANT feature flags ([#22266](facebook/react#22266)) //<Dan Abramov>//
- **[2f156eafb](facebook/react@2f156eafb )**: Adjust consoleManagedByDevToolsDuringStrictMode feature flag ([#22253](facebook/react#22253)) //<Dan Abramov>//
- **[cfd819332](facebook/react@cfd819332 )**: Add useSyncExternalStore to react-debug-tools ([#22240](facebook/react#22240)) //<Andrew Clark>//
- **[8e80592a3](facebook/react@8e80592a3 )**: Remove state queue from useSyncExternalStore ([#22265](facebook/react#22265)) //<Andrew Clark>//
- **[06f98c168](facebook/react@06f98c168 )**: Implement useSyncExternalStore in Fiber ([#22239](facebook/react#22239)) //<Andrew Clark>//
- **[77912d9a0](facebook/react@77912d9a0 )**: Wire up the native API for useSyncExternalStore ([#22237](facebook/react#22237)) //<Andrew Clark>//
- **[031abd24b](facebook/react@031abd24b )**: Add warning and test for useSyncExternalStore when getSnapshot isn't cached ([#22262](facebook/react#22262)) //<salazarm>//
- **[b8884de24](facebook/react@b8884de24 )**: break up import keyword to avoid being accidentally parsed as dynamic import statement in external code ([#21918](facebook/react#21918)) //<Jianhua Zheng>//
- **[6d6bba5bf](facebook/react@6d6bba5bf )**: Fix typo in ReactUpdatePriority-test.js ([#21958](facebook/react#21958)) //<Ikko Ashimine>//
- **[0c0d1ddae](facebook/react@0c0d1ddae )**: feat(eslint-plugin-react-hooks): support ESLint 8.x ([#22248](facebook/react#22248)) //<Michaël De Boey>//
- **[1314299c7](facebook/react@1314299c7 )**: Initial shim of useSyncExternalStore ([#22211](facebook/react#22211)) //<Andrew Clark>//
- **[fc40f02ad](facebook/react@fc40f02ad )**: Add consoleManagedByDevToolsDuringStrictMode feature flag in React Reconciler ([#22196](facebook/react#22196)) //<Luna Ruan>//
- **[46a0f050a](facebook/react@46a0f050a )**: Set up use-sync-external-store package ([#22202](facebook/react#22202)) //<Andrew Clark>//
- **[8723e772b](facebook/react@8723e772b )**: Fix a string interpolation typo in ReactHooks test ([#22174](facebook/react#22174)) //<Matt Hargett>//
- **[60a30cf32](facebook/react@60a30cf32 )**: Console Logging for StrictMode Double Rendering ([#22030](facebook/react#22030)) //<Luna Ruan>//
- **[76bbad3e3](facebook/react@76bbad3e3 )**: Add maxYieldMs feature flag in Scheduler ([#22165](facebook/react#22165)) //<Ricky>//
- **[b0b53ae2c](facebook/react@b0b53ae2c )**: Add feature flags for scheduler experiments ([#22105](facebook/react#22105)) //<Ricky>//

Changelog:
[General][Changed] - React Native sync for revisions bd5bf55...95d762e

jest_e2e[run_all_tests]

Reviewed By: mdvacca

Differential Revision: D30809906

fbshipit-source-id: 131cfdf91e15f67fa59a5d925467e538ee89fe10
zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022
The userspace shim of useSyncExternalStore uses a useState hook because
it's the only way to trigger a re-render. We don't actually use the
queue to store anything, because we read the current value directly
from the store.

In the native implementation, we can schedule an update on the fiber
directly, without the overhead of a queue.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants