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

Implement useSyncExternalStore in Fiber #22239

Merged
merged 1 commit into from
Sep 7, 2021

Conversation

acdlite
Copy link
Collaborator

@acdlite acdlite commented Sep 2, 2021

Based on #22237

This adds an initial implementation of useSyncExternalStore to the fiber reconciler. It's mostly a copy-paste of the userspace implementation, which is not ideal but is a good enough starting place.

The main change we'll want to make to this native implementation is to move the tearing checks from the layout phase to an earlier, pre-commit phase so that code that runs in the commit phase always observes a consistent tree.

Follow-ups:

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Sep 2, 2021
@sizebot
Copy link

sizebot commented Sep 2, 2021

Comparing: 77912d9...15bb962

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 +0.39% 127.79 kB 128.29 kB +0.31% 40.78 kB 40.91 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.38% 130.62 kB 131.11 kB +0.33% 41.70 kB 41.84 kB
facebook-www/ReactDOM-prod.classic.js +0.47% 405.49 kB 407.38 kB +0.39% 75.10 kB 75.39 kB
facebook-www/ReactDOM-prod.modern.js +0.48% 394.05 kB 395.94 kB +0.40% 73.39 kB 73.68 kB
facebook-www/ReactDOMForked-prod.classic.js +0.47% 405.49 kB 407.38 kB +0.39% 75.11 kB 75.40 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-prod.js +0.81% 233.01 kB 234.90 kB +0.76% 42.76 kB 43.08 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-dev.js +0.79% 609.15 kB 613.99 kB +0.99% 131.57 kB 132.87 kB
oss-stable-semver/react-test-renderer/cjs/react-test-renderer.development.js +0.79% 598.77 kB 603.48 kB +0.99% 130.62 kB 131.91 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.development.js +0.79% 598.77 kB 603.48 kB +0.99% 130.62 kB 131.91 kB
oss-stable-semver/react-test-renderer/umd/react-test-renderer.development.js +0.78% 628.05 kB 632.96 kB +0.97% 132.01 kB 133.29 kB
oss-stable/react-test-renderer/umd/react-test-renderer.development.js +0.78% 628.05 kB 632.96 kB +0.97% 132.01 kB 133.29 kB
facebook-www/ReactTestRenderer-dev.classic.js +0.78% 620.58 kB 625.42 kB +0.99% 132.78 kB 134.09 kB
facebook-www/ReactTestRenderer-dev.modern.js +0.78% 620.59 kB 625.43 kB +0.99% 132.79 kB 134.10 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.development.js +0.77% 614.62 kB 619.33 kB +0.94% 134.00 kB 135.26 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-profiling.js +0.77% 247.63 kB 249.53 kB +0.72% 45.02 kB 45.34 kB
oss-experimental/react-test-renderer/umd/react-test-renderer.development.js +0.76% 644.74 kB 649.65 kB +0.93% 135.43 kB 136.69 kB
facebook-www/ReactART-prod.modern.js +0.75% 254.73 kB 256.63 kB +0.66% 45.59 kB 45.89 kB
oss-stable-semver/react-art/cjs/react-art.development.js +0.73% 647.83 kB 652.54 kB +0.91% 140.14 kB 141.41 kB
oss-stable/react-art/cjs/react-art.development.js +0.73% 647.83 kB 652.54 kB +0.91% 140.14 kB 141.41 kB
facebook-www/ReactART-prod.classic.js +0.72% 262.40 kB 264.29 kB +0.65% 46.83 kB 47.14 kB
oss-experimental/react-art/cjs/react-art.development.js +0.71% 663.71 kB 668.42 kB +0.86% 143.56 kB 144.80 kB
react-native/implementations/ReactFabric-prod.js +0.70% 269.32 kB 271.21 kB +0.66% 48.43 kB 48.75 kB
react-native/implementations/ReactFabric-dev.js +0.69% 699.90 kB 704.74 kB +0.84% 151.44 kB 152.72 kB
facebook-www/ReactART-dev.modern.js +0.69% 701.89 kB 706.73 kB +0.85% 149.64 kB 150.91 kB
react-native/implementations/ReactFabric-prod.fb.js +0.69% 276.62 kB 278.52 kB +0.62% 49.77 kB 50.08 kB
react-native/implementations/ReactNativeRenderer-prod.js +0.68% 277.88 kB 279.77 kB +0.64% 50.04 kB 50.36 kB
facebook-www/ReactART-dev.classic.js +0.68% 712.17 kB 717.01 kB +0.84% 151.75 kB 153.03 kB
react-native/implementations/ReactNativeRenderer-prod.fb.js +0.68% 280.49 kB 282.38 kB +0.63% 50.66 kB 50.98 kB
react-native/implementations/ReactNativeRenderer-dev.js +0.67% 717.05 kB 721.89 kB +0.85% 155.35 kB 156.67 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.development.js +0.67% 698.98 kB 703.69 kB +0.84% 148.29 kB 149.54 kB
oss-stable/react-reconciler/cjs/react-reconciler.development.js +0.67% 698.98 kB 703.69 kB +0.84% 148.29 kB 149.54 kB
react-native/implementations/ReactFabric-dev.fb.js +0.67% 721.90 kB 726.74 kB +0.81% 155.82 kB 157.08 kB
react-native/implementations/ReactFabric-profiling.js +0.66% 287.28 kB 289.18 kB +0.70% 51.29 kB 51.65 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js +0.66% 715.05 kB 719.76 kB +0.84% 151.71 kB 152.99 kB
react-native/implementations/ReactNativeRenderer-dev.fb.js +0.66% 737.03 kB 741.87 kB +0.79% 159.20 kB 160.46 kB
oss-stable-semver/react-art/umd/react-art.development.js +0.65% 750.99 kB 755.90 kB +0.78% 158.51 kB 159.75 kB
oss-stable/react-art/umd/react-art.development.js +0.65% 750.99 kB 755.90 kB +0.78% 158.51 kB 159.75 kB
react-native/implementations/ReactFabric-profiling.fb.js +0.64% 294.61 kB 296.51 kB +0.71% 52.75 kB 53.12 kB
react-native/implementations/ReactNativeRenderer-profiling.js +0.64% 295.84 kB 297.74 kB +0.63% 52.90 kB 53.24 kB
oss-experimental/react-art/umd/react-art.development.js +0.64% 767.71 kB 772.62 kB +0.78% 161.92 kB 163.17 kB
react-native/implementations/ReactNativeRenderer-profiling.fb.js +0.63% 298.45 kB 300.34 kB +0.62% 53.53 kB 53.86 kB
oss-stable-semver/react-test-renderer/cjs/react-test-renderer.production.min.js +0.63% 77.79 kB 78.27 kB +0.58% 24.10 kB 24.24 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.production.min.js +0.63% 77.79 kB 78.27 kB +0.58% 24.10 kB 24.24 kB
oss-stable-semver/react-test-renderer/umd/react-test-renderer.production.min.js +0.63% 78.00 kB 78.49 kB +0.53% 24.48 kB 24.61 kB
oss-stable/react-test-renderer/umd/react-test-renderer.production.min.js +0.63% 78.00 kB 78.49 kB +0.53% 24.48 kB 24.61 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.production.min.js +0.61% 80.17 kB 80.65 kB +0.65% 24.86 kB 25.03 kB
oss-experimental/react-test-renderer/umd/react-test-renderer.production.min.js +0.61% 80.38 kB 80.86 kB +0.51% 25.26 kB 25.39 kB
oss-stable-semver/react-art/cjs/react-art.production.min.js +0.61% 80.92 kB 81.41 kB +0.62% 25.10 kB 25.26 kB
oss-stable/react-art/cjs/react-art.production.min.js +0.61% 80.92 kB 81.41 kB +0.62% 25.10 kB 25.26 kB
oss-experimental/react-art/cjs/react-art.production.min.js +0.59% 83.31 kB 83.80 kB +0.63% 25.87 kB 26.04 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.production.min.js +0.55% 89.91 kB 90.40 kB +0.55% 27.59 kB 27.75 kB
oss-stable/react-reconciler/cjs/react-reconciler.production.min.js +0.55% 89.91 kB 90.40 kB +0.55% 27.59 kB 27.75 kB
oss-experimental/react-reconciler/cjs/react-reconciler.production.min.js +0.53% 92.36 kB 92.85 kB +0.52% 28.38 kB 28.52 kB
facebook-www/ReactDOMTesting-dev.modern.js +0.51% 940.54 kB 945.38 kB +0.61% 211.50 kB 212.80 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.profiling.min.js +0.50% 97.68 kB 98.17 kB +0.49% 29.94 kB 30.08 kB
oss-stable/react-reconciler/cjs/react-reconciler.profiling.min.js +0.50% 97.68 kB 98.17 kB +0.49% 29.94 kB 30.08 kB
facebook-www/ReactDOMTesting-dev.classic.js +0.50% 967.61 kB 972.45 kB +0.60% 217.15 kB 218.45 kB
facebook-www/ReactDOMTesting-prod.modern.js +0.50% 382.53 kB 384.43 kB +0.41% 72.64 kB 72.94 kB
oss-experimental/react-reconciler/cjs/react-reconciler.profiling.min.js +0.49% 100.15 kB 100.64 kB +0.44% 30.70 kB 30.83 kB
oss-stable-semver/react-dom/cjs/react-dom.development.js +0.49% 965.31 kB 970.02 kB +0.57% 217.07 kB 218.31 kB
oss-stable/react-dom/cjs/react-dom.development.js +0.49% 965.31 kB 970.02 kB +0.57% 217.07 kB 218.31 kB
oss-stable-semver/react-dom/umd/react-dom.development.js +0.48% 1,014.27 kB 1,019.19 kB +0.57% 219.68 kB 220.92 kB
oss-stable/react-dom/umd/react-dom.development.js +0.48% 1,014.27 kB 1,019.19 kB +0.57% 219.68 kB 220.92 kB
facebook-www/ReactDOM-prod.modern.js +0.48% 394.05 kB 395.94 kB +0.40% 73.39 kB 73.68 kB
facebook-www/ReactDOMForked-prod.modern.js +0.48% 394.05 kB 395.94 kB +0.40% 73.39 kB 73.68 kB
oss-experimental/react-dom/cjs/react-dom.development.js +0.48% 983.16 kB 987.87 kB +0.57% 220.80 kB 222.06 kB
facebook-www/ReactDOMTesting-prod.classic.js +0.48% 395.78 kB 397.68 kB +0.40% 74.70 kB 75.00 kB
oss-experimental/react-dom/umd/react-dom.development.js +0.48% 1,033.08 kB 1,037.99 kB +0.55% 223.41 kB 224.65 kB
facebook-www/ReactDOM-prod.classic.js +0.47% 405.49 kB 407.38 kB +0.39% 75.10 kB 75.39 kB
facebook-www/ReactDOMForked-prod.classic.js +0.47% 405.49 kB 407.38 kB +0.39% 75.11 kB 75.40 kB
facebook-www/ReactDOMForked-dev.modern.js +0.47% 1,038.17 kB 1,043.01 kB +0.56% 230.40 kB 231.69 kB
facebook-www/ReactDOM-dev.modern.js +0.47% 1,038.17 kB 1,043.01 kB +0.56% 230.40 kB 231.69 kB
facebook-www/ReactDOMForked-dev.classic.js +0.46% 1,062.61 kB 1,067.45 kB +0.54% 235.37 kB 236.64 kB
facebook-www/ReactDOM-dev.classic.js +0.46% 1,062.61 kB 1,067.45 kB +0.54% 235.37 kB 236.65 kB
facebook-www/ReactDOM-profiling.modern.js +0.45% 420.29 kB 422.19 kB +0.34% 77.92 kB 78.19 kB
facebook-www/ReactDOMForked-profiling.modern.js +0.45% 420.29 kB 422.19 kB +0.34% 77.93 kB 78.19 kB
facebook-www/ReactDOM-profiling.classic.js +0.44% 431.78 kB 433.68 kB +0.33% 79.62 kB 79.89 kB
facebook-www/ReactDOMForked-profiling.classic.js +0.44% 431.78 kB 433.68 kB +0.33% 79.62 kB 79.89 kB
oss-stable-semver/react-art/umd/react-art.production.min.js +0.42% 116.85 kB 117.33 kB +0.39% 36.31 kB 36.45 kB
oss-stable/react-art/umd/react-art.production.min.js +0.42% 116.85 kB 117.33 kB +0.39% 36.31 kB 36.45 kB
oss-experimental/react-art/umd/react-art.production.min.js +0.41% 119.23 kB 119.72 kB +0.40% 37.03 kB 37.18 kB
oss-stable-semver/react-dom/cjs/react-dom.production.min.js +0.39% 127.79 kB 128.29 kB +0.31% 40.78 kB 40.91 kB
oss-stable/react-dom/cjs/react-dom.production.min.js +0.39% 127.79 kB 128.29 kB +0.31% 40.78 kB 40.91 kB
oss-stable-semver/react-dom/umd/react-dom.production.min.js +0.38% 127.94 kB 128.43 kB +0.31% 41.53 kB 41.66 kB
oss-stable/react-dom/umd/react-dom.production.min.js +0.38% 127.94 kB 128.43 kB +0.31% 41.53 kB 41.66 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.38% 130.62 kB 131.11 kB +0.33% 41.70 kB 41.84 kB
oss-experimental/react-dom/umd/react-dom.production.min.js +0.38% 130.72 kB 131.21 kB +0.31% 42.49 kB 42.62 kB
oss-stable-semver/react-dom/cjs/react-dom.profiling.min.js +0.36% 135.46 kB 135.96 kB +0.36% 43.09 kB 43.24 kB
oss-stable/react-dom/cjs/react-dom.profiling.min.js +0.36% 135.46 kB 135.96 kB +0.36% 43.09 kB 43.24 kB
oss-stable-semver/react-dom/umd/react-dom.profiling.min.js +0.36% 135.57 kB 136.06 kB +0.34% 43.91 kB 44.06 kB
oss-stable/react-dom/umd/react-dom.profiling.min.js +0.36% 135.57 kB 136.06 kB +0.34% 43.91 kB 44.06 kB
oss-experimental/react-dom/cjs/react-dom.profiling.min.js +0.36% 138.31 kB 138.80 kB +0.37% 44.11 kB 44.27 kB
oss-experimental/react-dom/umd/react-dom.profiling.min.js +0.36% 138.37 kB 138.86 kB +0.35% 44.81 kB 44.97 kB

Generated by 🚫 dangerJS against 15bb962

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

@@ -242,27 +240,29 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
expect(root).toMatchRenderedOutput('A0B0');

// Update b but not a
act(() => {
await act(() => {
Copy link
Member

Choose a reason for hiding this comment

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

Just to check my understanding of the current state of act - we need to use await here because we're using internal act right? External act wouldn't?

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 that's right. I think we could remove from internal act by mocking the microtask queue (which I think Jest already does, maybe?), just haven't yet. External act works because it bypasses the microtask queue entirely.

This adds an initial implementation of useSyncExternalStore to the
fiber reconciler. It's mostly a copy-paste of the userspace
implementation, which is not ideal but is a good enough starting place.

The main change we'll want to make to this native implementation is to
move the tearing checks from the layout phase to an earlier, pre-commit
phase so that code that runs in the commit phase always observes a
consistent tree.

Follow-ups:

- Implement in Fizz
- Implement in old SSR renderer
- Implement in react-debug-hooks
@acdlite acdlite force-pushed the usesyncexternalstore-fiber branch from c65b925 to 15bb962 Compare September 7, 2021 17:21
@acdlite acdlite merged commit 06f98c1 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
@gaearon gaearon mentioned this pull request Mar 29, 2022
zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022
This adds an initial implementation of useSyncExternalStore to the
fiber reconciler. It's mostly a copy-paste of the userspace
implementation, which is not ideal but is a good enough starting place.

The main change we'll want to make to this native implementation is to
move the tearing checks from the layout phase to an earlier, pre-commit
phase so that code that runs in the commit phase always observes a
consistent tree.

Follow-ups:

- Implement in Fizz
- Implement in old SSR renderer
- Implement in react-debug-hooks
This was referenced Nov 8, 2024
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