{"body":"Adds useSyncExternalStore to the internal dispatcher, and exports\r\nthe native API from the React package without yet implementing it.","parents":["031abd24b62b7b0db2e8658ffce7728eb8592d32"],"patch":"diff --git a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\nindex 7d2679b319..0e2364f672 100644\n--- a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+++ b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n@@ -265,6 +265,13 @@ function useMutableSource(\n return value;\n }\n \n+function useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+): T {\n+ throw new Error('Not yet implemented');\n+}\n+\n function useTransition(): [boolean, (() => void) => void] {\n \/\/ useTransition() composes multiple hooks internally.\n \/\/ Advance the current hook index the same number of times\n@@ -326,6 +333,7 @@ const Dispatcher: DispatcherType = {\n useState,\n useTransition,\n useMutableSource,\n+ useSyncExternalStore,\n useDeferredValue,\n useOpaqueIdentifier,\n };\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js b\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\nindex 433ab9ae07..0712d9fee9 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\n@@ -462,6 +462,13 @@ function useMutableSource(\n return getSnapshot(source._source);\n }\n \n+function useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+): T {\n+ throw new Error('Not yet implemented');\n+}\n+\n function useDeferredValue(value: T): T {\n resolveCurrentlyRenderingComponent();\n return value;\n@@ -514,6 +521,7 @@ export const Dispatcher: DispatcherType = {\n useOpaqueIdentifier,\n \/\/ Subscriptions are not setup in a server environment.\n useMutableSource,\n+ useSyncExternalStore,\n };\n \n if (enableCache) {\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\nindex b19530e24b..40beec7f8c 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\n@@ -1242,6 +1242,20 @@ function updateMutableSource(\n return useMutableSource(hook, source, getSnapshot, subscribe);\n }\n \n+function mountSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+): T {\n+ throw new Error('Not yet implemented');\n+}\n+\n+function updateSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+): T {\n+ throw new Error('Not yet implemented');\n+}\n+\n function mountState(\n initialState: (() => S) | S,\n ): [S, Dispatch>] {\n@@ -2079,6 +2093,7 @@ export const ContextOnlyDispatcher: Dispatcher = {\n useDeferredValue: throwInvalidHookError,\n useTransition: throwInvalidHookError,\n useMutableSource: throwInvalidHookError,\n+ useSyncExternalStore: throwInvalidHookError,\n useOpaqueIdentifier: throwInvalidHookError,\n \n unstable_isNewReconciler: enableNewReconciler,\n@@ -2104,6 +2119,7 @@ const HooksDispatcherOnMount: Dispatcher = {\n useDeferredValue: mountDeferredValue,\n useTransition: mountTransition,\n useMutableSource: mountMutableSource,\n+ useSyncExternalStore: mountSyncExternalStore,\n useOpaqueIdentifier: mountOpaqueIdentifier,\n \n unstable_isNewReconciler: enableNewReconciler,\n@@ -2129,6 +2145,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {\n useDeferredValue: updateDeferredValue,\n useTransition: updateTransition,\n useMutableSource: updateMutableSource,\n+ useSyncExternalStore: updateSyncExternalStore,\n useOpaqueIdentifier: updateOpaqueIdentifier,\n \n unstable_isNewReconciler: enableNewReconciler,\n@@ -2154,6 +2171,7 @@ const HooksDispatcherOnRerender: Dispatcher = {\n useDeferredValue: rerenderDeferredValue,\n useTransition: rerenderTransition,\n useMutableSource: updateMutableSource,\n+ useSyncExternalStore: mountSyncExternalStore,\n useOpaqueIdentifier: rerenderOpaqueIdentifier,\n \n unstable_isNewReconciler: enableNewReconciler,\n@@ -2302,6 +2320,14 @@ if (__DEV__) {\n mountHookTypesDev();\n return mountMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ mountHookTypesDev();\n+ return mountSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n mountHookTypesDev();\n@@ -2426,6 +2452,14 @@ if (__DEV__) {\n updateHookTypesDev();\n return mountMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ updateHookTypesDev();\n+ return mountSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n updateHookTypesDev();\n@@ -2550,6 +2584,14 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ updateHookTypesDev();\n+ return updateSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n updateHookTypesDev();\n@@ -2675,6 +2717,14 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ updateHookTypesDev();\n+ return updateSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n updateHookTypesDev();\n@@ -2813,6 +2863,15 @@ if (__DEV__) {\n mountHookTypesDev();\n return mountMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ warnInvalidHookAccess();\n+ mountHookTypesDev();\n+ return mountSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n warnInvalidHookAccess();\n@@ -2952,6 +3011,15 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ warnInvalidHookAccess();\n+ updateHookTypesDev();\n+ return updateSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n warnInvalidHookAccess();\n@@ -3092,6 +3160,15 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ warnInvalidHookAccess();\n+ updateHookTypesDev();\n+ return updateSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n warnInvalidHookAccess();\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\nindex fb1e9b8688..08c61e9b16 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\n@@ -1242,6 +1242,20 @@ function updateMutableSource(\n return useMutableSource(hook, source, getSnapshot, subscribe);\n }\n \n+function mountSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+): T {\n+ throw new Error('Not yet implemented');\n+}\n+\n+function updateSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+): T {\n+ throw new Error('Not yet implemented');\n+}\n+\n function mountState(\n initialState: (() => S) | S,\n ): [S, Dispatch>] {\n@@ -2079,6 +2093,7 @@ export const ContextOnlyDispatcher: Dispatcher = {\n useDeferredValue: throwInvalidHookError,\n useTransition: throwInvalidHookError,\n useMutableSource: throwInvalidHookError,\n+ useSyncExternalStore: throwInvalidHookError,\n useOpaqueIdentifier: throwInvalidHookError,\n \n unstable_isNewReconciler: enableNewReconciler,\n@@ -2104,6 +2119,7 @@ const HooksDispatcherOnMount: Dispatcher = {\n useDeferredValue: mountDeferredValue,\n useTransition: mountTransition,\n useMutableSource: mountMutableSource,\n+ useSyncExternalStore: mountSyncExternalStore,\n useOpaqueIdentifier: mountOpaqueIdentifier,\n \n unstable_isNewReconciler: enableNewReconciler,\n@@ -2129,6 +2145,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {\n useDeferredValue: updateDeferredValue,\n useTransition: updateTransition,\n useMutableSource: updateMutableSource,\n+ useSyncExternalStore: updateSyncExternalStore,\n useOpaqueIdentifier: updateOpaqueIdentifier,\n \n unstable_isNewReconciler: enableNewReconciler,\n@@ -2154,6 +2171,7 @@ const HooksDispatcherOnRerender: Dispatcher = {\n useDeferredValue: rerenderDeferredValue,\n useTransition: rerenderTransition,\n useMutableSource: updateMutableSource,\n+ useSyncExternalStore: mountSyncExternalStore,\n useOpaqueIdentifier: rerenderOpaqueIdentifier,\n \n unstable_isNewReconciler: enableNewReconciler,\n@@ -2302,6 +2320,14 @@ if (__DEV__) {\n mountHookTypesDev();\n return mountMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ mountHookTypesDev();\n+ return mountSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n mountHookTypesDev();\n@@ -2426,6 +2452,14 @@ if (__DEV__) {\n updateHookTypesDev();\n return mountMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ updateHookTypesDev();\n+ return mountSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n updateHookTypesDev();\n@@ -2550,6 +2584,14 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ updateHookTypesDev();\n+ return updateSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n updateHookTypesDev();\n@@ -2675,6 +2717,14 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ updateHookTypesDev();\n+ return updateSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n updateHookTypesDev();\n@@ -2813,6 +2863,15 @@ if (__DEV__) {\n mountHookTypesDev();\n return mountMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ warnInvalidHookAccess();\n+ mountHookTypesDev();\n+ return mountSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n warnInvalidHookAccess();\n@@ -2952,6 +3011,15 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ warnInvalidHookAccess();\n+ updateHookTypesDev();\n+ return updateSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n warnInvalidHookAccess();\n@@ -3092,6 +3160,15 @@ if (__DEV__) {\n updateHookTypesDev();\n return updateMutableSource(source, getSnapshot, subscribe);\n },\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T {\n+ currentHookNameInDev = 'useSyncExternalStore';\n+ warnInvalidHookAccess();\n+ updateHookTypesDev();\n+ return updateSyncExternalStore(subscribe, getSnapshot);\n+ },\n useOpaqueIdentifier(): OpaqueIDType | void {\n currentHookNameInDev = 'useOpaqueIdentifier';\n warnInvalidHookAccess();\ndiff --git a\/packages\/react-reconciler\/src\/ReactInternalTypes.js b\/packages\/react-reconciler\/src\/ReactInternalTypes.js\nindex 5a4bc62374..33bdb24af0 100644\n--- a\/packages\/react-reconciler\/src\/ReactInternalTypes.js\n+++ b\/packages\/react-reconciler\/src\/ReactInternalTypes.js\n@@ -41,6 +41,7 @@ export type HookType =\n | 'useDeferredValue'\n | 'useTransition'\n | 'useMutableSource'\n+ | 'useSyncExternalStore'\n | 'useOpaqueIdentifier'\n | 'useCacheRefresh';\n \n@@ -304,6 +305,10 @@ export type Dispatcher = {|\n getSnapshot: MutableSourceGetSnapshotFn,\n subscribe: MutableSourceSubscribeFn,\n ): Snapshot,\n+ useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+ ): T,\n useOpaqueIdentifier(): any,\n useCacheRefresh?: () => (?() => T, ?T) => void,\n \ndiff --git a\/packages\/react-server\/src\/ReactFizzHooks.js b\/packages\/react-server\/src\/ReactFizzHooks.js\nindex 23a35c1803..51ea84e8c4 100644\n--- a\/packages\/react-server\/src\/ReactFizzHooks.js\n+++ b\/packages\/react-server\/src\/ReactFizzHooks.js\n@@ -461,6 +461,13 @@ function useMutableSource(\n return getSnapshot(source._source);\n }\n \n+function useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+): T {\n+ throw new Error('Not yet implemented');\n+}\n+\n function useDeferredValue(value: T): T {\n resolveCurrentlyRenderingComponent();\n return value;\n@@ -509,6 +516,7 @@ export const Dispatcher: DispatcherType = {\n useOpaqueIdentifier,\n \/\/ Subscriptions are not setup in a server environment.\n useMutableSource,\n+ useSyncExternalStore,\n };\n \n if (enableCache) {\ndiff --git a\/packages\/react-server\/src\/ReactFlightServer.js b\/packages\/react-server\/src\/ReactFlightServer.js\nindex dd5b43df2d..efac391833 100644\n--- a\/packages\/react-server\/src\/ReactFlightServer.js\n+++ b\/packages\/react-server\/src\/ReactFlightServer.js\n@@ -827,6 +827,7 @@ const Dispatcher: DispatcherType = {\n useEffect: (unsupportedHook: any),\n useOpaqueIdentifier: (unsupportedHook: any),\n useMutableSource: (unsupportedHook: any),\n+ useSyncExternalStore: (unsupportedHook: any),\n useCacheRefresh(): (?() => T, ?T) => void {\n return unsupportedRefresh;\n },\ndiff --git a\/packages\/react-suspense-test-utils\/src\/ReactSuspenseTestUtils.js b\/packages\/react-suspense-test-utils\/src\/ReactSuspenseTestUtils.js\nindex 43c6c5184d..ca898150b7 100644\n--- a\/packages\/react-suspense-test-utils\/src\/ReactSuspenseTestUtils.js\n+++ b\/packages\/react-suspense-test-utils\/src\/ReactSuspenseTestUtils.js\n@@ -44,6 +44,7 @@ export function waitForSuspense(fn: () => T): Promise {\n useTransition: unsupported,\n useOpaqueIdentifier: unsupported,\n useMutableSource: unsupported,\n+ useSyncExternalStore: unsupported,\n useCacheRefresh: unsupported,\n };\n \/\/ Not using async\/await because we don't compile it.\ndiff --git a\/packages\/react\/index.classic.fb.js b\/packages\/react\/index.classic.fb.js\nindex 653013c7b0..756f69f271 100644\n--- a\/packages\/react\/index.classic.fb.js\n+++ b\/packages\/react\/index.classic.fb.js\n@@ -51,6 +51,8 @@ export {\n useMemo,\n useMutableSource,\n useMutableSource as unstable_useMutableSource,\n+ useSyncExternalStore,\n+ useSyncExternalStore as unstable_useSyncExternalStore,\n useReducer,\n useRef,\n useState,\ndiff --git a\/packages\/react\/index.experimental.js b\/packages\/react\/index.experimental.js\nindex ab90ea66bc..230e94f3a5 100644\n--- a\/packages\/react\/index.experimental.js\n+++ b\/packages\/react\/index.experimental.js\n@@ -45,6 +45,7 @@ export {\n useLayoutEffect,\n useMemo,\n useMutableSource as unstable_useMutableSource,\n+ useSyncExternalStore as unstable_useSyncExternalStore,\n useReducer,\n useRef,\n useState,\ndiff --git a\/packages\/react\/index.js b\/packages\/react\/index.js\nindex 247d17ec01..c2285c6b0b 100644\n--- a\/packages\/react\/index.js\n+++ b\/packages\/react\/index.js\n@@ -70,6 +70,8 @@ export {\n useLayoutEffect,\n useMemo,\n useMutableSource,\n+ useSyncExternalStore,\n+ useSyncExternalStore as unstable_useSyncExternalStore,\n useReducer,\n useRef,\n useState,\ndiff --git a\/packages\/react\/index.modern.fb.js b\/packages\/react\/index.modern.fb.js\nindex 4f316eacad..d87d7c891e 100644\n--- a\/packages\/react\/index.modern.fb.js\n+++ b\/packages\/react\/index.modern.fb.js\n@@ -50,6 +50,8 @@ export {\n useMemo,\n useMutableSource,\n useMutableSource as unstable_useMutableSource,\n+ useSyncExternalStore,\n+ useSyncExternalStore as unstable_useSyncExternalStore,\n useReducer,\n useRef,\n useState,\ndiff --git a\/packages\/react\/src\/React.js b\/packages\/react\/src\/React.js\nindex 2b87d18b6c..24421bd86c 100644\n--- a\/packages\/react\/src\/React.js\n+++ b\/packages\/react\/src\/React.js\n@@ -44,6 +44,7 @@ import {\n useLayoutEffect,\n useMemo,\n useMutableSource,\n+ useSyncExternalStore,\n useReducer,\n useRef,\n useState,\n@@ -93,6 +94,7 @@ export {\n useLayoutEffect,\n useMemo,\n useMutableSource,\n+ useSyncExternalStore,\n useReducer,\n useRef,\n useState,\ndiff --git a\/packages\/react\/src\/ReactHooks.js b\/packages\/react\/src\/ReactHooks.js\nindex 82bd886d82..b284267b64 100644\n--- a\/packages\/react\/src\/ReactHooks.js\n+++ b\/packages\/react\/src\/ReactHooks.js\n@@ -169,6 +169,14 @@ export function useMutableSource(\n return dispatcher.useMutableSource(source, getSnapshot, subscribe);\n }\n \n+export function useSyncExternalStore(\n+ subscribe: (() => void) => () => void,\n+ getSnapshot: () => T,\n+): T {\n+ const dispatcher = resolveDispatcher();\n+ return dispatcher.useSyncExternalStore(subscribe, getSnapshot);\n+}\n+\n export function useCacheRefresh(): (?() => T, ?T) => void {\n const dispatcher = resolveDispatcher();\n \/\/ $FlowFixMe This is unstable, thus optional\ndiff --git a\/packages\/use-sync-external-store\/src\/__tests__\/useSyncExternalStoreShared-test.js b\/packages\/use-sync-external-store\/src\/__tests__\/useSyncExternalStoreShared-test.js\nindex 3102087b8e..4bf0c4bc95 100644\n--- a\/packages\/use-sync-external-store\/src\/__tests__\/useSyncExternalStoreShared-test.js\n+++ b\/packages\/use-sync-external-store\/src\/__tests__\/useSyncExternalStoreShared-test.js\n@@ -29,11 +29,28 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n \/\/ use the shim.\n \/\/ TODO: Don't do this during a variant test run. That way these tests run\n \/\/ against both the shim and the built-in implementation.\n- jest.mock('react', () => {\n- \/\/ eslint-disable-next-line no-unused-vars\n- const {startTransition, ...otherExports} = jest.requireActual('react');\n- return otherExports;\n- });\n+ if (gate(flags => flags.variant)) {\n+ \/\/ We'll use the variant flag to represent the native implementation\n+ } else {\n+ \/\/ and the non-variant tests for the shim.\n+ \/\/\n+ \/\/ Remove useSyncExternalStore from the React imports so that we use the\n+ \/\/ shim instead. Also removing startTransition, since we use that to\n+ \/\/ detect outdated 18 alphas that don't yet include useSyncExternalStore.\n+ \/\/\n+ \/\/ Longer term, we'll probably test this branch using an actual build\n+ \/\/ of React 17.\n+ jest.mock('react', () => {\n+ const {\n+ \/\/ eslint-disable-next-line no-unused-vars\n+ startTransition: _,\n+ \/\/ eslint-disable-next-line no-unused-vars\n+ useSyncExternalStore: __,\n+ ...otherExports\n+ } = jest.requireActual('react');\n+ return otherExports;\n+ });\n+ }\n \n React = require('react');\n ReactNoop = require('react-noop-renderer');\n@@ -63,14 +80,17 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n function createRoot(element) {\n \/\/ This wrapper function exists so we can test both legacy roots and\n \/\/ concurrent roots.\n- \/\/\n- \/\/ TODO: Once the built-in API exists, conditionally test the concurrent\n- \/\/ root API, too.\n- const root = ReactNoop.createLegacyRoot();\n- act(() => {\n- root.render(element);\n- });\n- return root;\n+ if (gate(flags => flags.variant)) {\n+ \/\/ The native implementation only exists in 18+, so we test using\n+ \/\/ concurrent mode. To test the legacy root behavior in the native\n+ \/\/ implementation (which is supported in the sense that it needs to have\n+ \/\/ the correct behavior, despite the fact that the legacy root API\n+ \/\/ triggers a warning in 18), write a test that uses\n+ \/\/ createLegacyRoot directly.\n+ return ReactNoop.createRoot();\n+ } else {\n+ return ReactNoop.createLegacyRoot();\n+ }\n }\n \n function createExternalStore(initialState) {\n@@ -96,6 +116,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n };\n }\n \n+ \/\/ @gate !variant\n test('basic usage', () => {\n const store = createExternalStore('Initial');\n \n@@ -104,7 +125,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n return ;\n }\n \n- const root = createRoot();\n+ const root = createRoot();\n+ act(() => root.render());\n \n expect(Scheduler).toHaveYielded(['Initial']);\n expect(root).toMatchRenderedOutput('Initial');\n@@ -116,6 +138,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n expect(root).toMatchRenderedOutput('Updated');\n });\n \n+ \/\/ @gate !variant\n test('skips re-rendering if nothing changes', () => {\n const store = createExternalStore('Initial');\n \n@@ -124,7 +147,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n return ;\n }\n \n- const root = createRoot();\n+ const root = createRoot();\n+ act(() => root.render());\n \n expect(Scheduler).toHaveYielded(['Initial']);\n expect(root).toMatchRenderedOutput('Initial');\n@@ -138,6 +162,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n expect(root).toMatchRenderedOutput('Initial');\n });\n \n+ \/\/ @gate !variant\n test('switch to a different store', () => {\n const storeA = createExternalStore(0);\n const storeB = createExternalStore(0);\n@@ -150,7 +175,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n return ;\n }\n \n- const root = createRoot();\n+ const root = createRoot();\n+ act(() => root.render());\n \n expect(Scheduler).toHaveYielded([0]);\n expect(root).toMatchRenderedOutput('0');\n@@ -187,6 +213,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n expect(root).toMatchRenderedOutput('1');\n });\n \n+ \/\/ @gate !variant\n test('selecting a specific value inside getSnapshot', () => {\n const store = createExternalStore({a: 0, b: 0});\n \n@@ -208,7 +235,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n );\n }\n \n- const root = createRoot();\n+ const root = createRoot();\n+ act(() => root.render());\n \n expect(Scheduler).toHaveYielded(['A0', 'B0']);\n expect(root).toMatchRenderedOutput('A0B0');\n@@ -230,6 +258,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n expect(root).toMatchRenderedOutput('A1B1');\n });\n \n+ \/\/ @gate !variant\n test(\n \"compares to current state before bailing out, even when there's a \" +\n 'mutation in between the sync and passive effects',\n@@ -244,7 +273,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n return ;\n }\n \n- const root = createRoot();\n+ const root = createRoot();\n+ act(() => root.render());\n expect(Scheduler).toHaveYielded([0, 'Passive effect: 0']);\n \n \/\/ Schedule an update. We'll intentionally not use `act` so that we can\n@@ -272,6 +302,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n },\n );\n \n+ \/\/ @gate !variant\n test('mutating the store in between render and commit when getSnapshot has changed', () => {\n const store = createExternalStore({a: 1, b: 1});\n \n@@ -312,7 +343,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n );\n }\n \n- const root = createRoot();\n+ const root = createRoot();\n+ act(() => root.render());\n expect(Scheduler).toHaveYielded(['A1']);\n expect(root).toMatchRenderedOutput('A1');\n \n@@ -330,6 +362,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n expect(root).toMatchRenderedOutput('B2');\n });\n \n+ \/\/ @gate !variant\n test('mutating the store in between render and commit when getSnapshot has _not_ changed', () => {\n \/\/ Same as previous test, but `getSnapshot` does not change\n const store = createExternalStore({a: 1, b: 1});\n@@ -368,7 +401,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n );\n }\n \n- const root = createRoot();\n+ const root = createRoot();\n+ act(() => root.render());\n expect(Scheduler).toHaveYielded(['A1']);\n expect(root).toMatchRenderedOutput('A1');\n \n@@ -387,6 +421,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n expect(root).toMatchRenderedOutput('A1');\n });\n \n+ \/\/ @gate !variant\n test(\"does not bail out if the previous update hasn't finished yet\", () => {\n const store = createExternalStore(0);\n \n@@ -406,11 +441,14 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n return ;\n }\n \n- const root = createRoot(\n- <>\n- \n- \n- <\/>,\n+ const root = createRoot();\n+ act(() =>\n+ root.render(\n+ <>\n+ \n+ \n+ <\/>,\n+ ),\n );\n expect(Scheduler).toHaveYielded([0, 0]);\n expect(root).toMatchRenderedOutput('00');\n@@ -422,6 +460,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n expect(root).toMatchRenderedOutput('00');\n });\n \n+ \/\/ @gate !variant\n test('uses the latest getSnapshot, even if it changed in the same batch as a store update', () => {\n const store = createExternalStore({a: 0, b: 0});\n \n@@ -436,7 +475,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n return ;\n }\n \n- const root = createRoot();\n+ const root = createRoot();\n+ act(() => root.render());\n expect(Scheduler).toHaveYielded([0]);\n \n \/\/ Update the store and getSnapshot at the same time\n@@ -449,6 +489,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n expect(root).toMatchRenderedOutput('2');\n });\n \n+ \/\/ @gate !variant\n test('handles errors thrown by getSnapshot or isEqual', () => {\n class ErrorBoundary extends React.Component {\n state = {error: null};\n@@ -492,10 +533,13 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n }\n \n const errorBoundary = React.createRef(null);\n- const root = createRoot(\n- \n- \n- <\/ErrorBoundary>,\n+ const root = createRoot();\n+ act(() =>\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ ),\n );\n expect(Scheduler).toHaveYielded([0]);\n expect(root).toMatchRenderedOutput('0');\n@@ -524,7 +568,32 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n expect(root).toMatchRenderedOutput('1');\n });\n \n+ \/\/ @gate !variant\n+ test('Infinite loop if getSnapshot keeps returning new reference', () => {\n+ const store = createExternalStore({});\n+\n+ function App() {\n+ const text = useSyncExternalStore(store.subscribe, () => ({}));\n+ return ;\n+ }\n+\n+ spyOnDev(console, 'error');\n+ const root = createRoot();\n+\n+ expect(() => act(() => root.render())).toThrow(\n+ 'Maximum update depth exceeded. This can happen when a component repeatedly ' +\n+ 'calls setState inside componentWillUpdate or componentDidUpdate. React limits ' +\n+ 'the number of nested updates to prevent infinite loops.',\n+ );\n+ if (__DEV__) {\n+ expect(console.error.calls.argsFor(0)[0]).toMatch(\n+ 'The result of getSnapshot should be cached to avoid an infinite loop',\n+ );\n+ }\n+ });\n+\n describe('extra features implemented in user-space', () => {\n+ \/\/ @gate !variant\n test('memoized selectors are only called once per update', () => {\n const store = createExternalStore({a: 0, b: 0});\n \n@@ -543,7 +612,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n return ;\n }\n \n- const root = createRoot();\n+ const root = createRoot();\n+ act(() => root.render());\n \n expect(Scheduler).toHaveYielded(['App', 'Selector', 'A0']);\n expect(root).toMatchRenderedOutput('A0');\n@@ -563,6 +633,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n expect(root).toMatchRenderedOutput('A1');\n });\n \n+ \/\/ @gate !variant\n test('Using isEqual to bailout', () => {\n const store = createExternalStore({a: 0, b: 0});\n \n@@ -596,7 +667,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n );\n }\n \n- const root = createRoot();\n+ const root = createRoot();\n+ act(() => root.render());\n \n expect(Scheduler).toHaveYielded(['A0', 'B0']);\n expect(root).toMatchRenderedOutput('A0B0');\n@@ -618,30 +690,4 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {\n expect(root).toMatchRenderedOutput('A1B1');\n });\n });\n-\n- test('Infinite loop if getSnapshot keeps returning new reference', () => {\n- const store = createExternalStore({});\n-\n- function App() {\n- const text = useSyncExternalStore(store.subscribe, () => ({}));\n- return ;\n- }\n-\n- spyOnDev(console, 'error');\n-\n- expect(() => {\n- act(() => {\n- createRoot();\n- });\n- }).toThrow(\n- 'Maximum update depth exceeded. This can happen when a component repeatedly ' +\n- 'calls setState inside componentWillUpdate or componentDidUpdate. React limits ' +\n- 'the number of nested updates to prevent infinite loops.',\n- );\n- if (__DEV__) {\n- expect(console.error.calls.argsFor(0)[0]).toMatch(\n- 'The result of getSnapshot should be cached to avoid an infinite loop',\n- );\n- }\n- });\n });\ndiff --git a\/packages\/use-sync-external-store\/src\/useSyncExternalStore.js b\/packages\/use-sync-external-store\/src\/useSyncExternalStore.js\nindex 8607c915eb..73cd7f8089 100644\n--- a\/packages\/use-sync-external-store\/src\/useSyncExternalStore.js\n+++ b\/packages\/use-sync-external-store\/src\/useSyncExternalStore.js\n@@ -17,8 +17,6 @@ const {\n useEffect,\n useLayoutEffect,\n useDebugValue,\n-\n- \/\/ $FlowFixMe - useSyncExternalStore not yet part of React Flow types\n useSyncExternalStore: builtInAPI,\n } = React;\n \n@@ -26,7 +24,9 @@ const {\n \/\/ we're in version 16 or 17, so rendering is always synchronous. The shim\n \/\/ does not support concurrent rendering, only the built-in API.\n export const useSyncExternalStore =\n- builtInAPI !== undefined ? builtInAPI : useSyncExternalStore_shim;\n+ builtInAPI !== undefined\n+ ? ((builtInAPI: any): typeof useSyncExternalStore_shim)\n+ : useSyncExternalStore_shim;\n \n let didWarnOld18Alpha = false;\n let didWarnUncachedGetSnapshot = false;\ndiff --git a\/scripts\/jest\/TestFlags.js b\/scripts\/jest\/TestFlags.js\nindex 9e9a531b0b..9dbea6326d 100644\n--- a\/scripts\/jest\/TestFlags.js\n+++ b\/scripts\/jest\/TestFlags.js\n@@ -42,6 +42,8 @@ const environmentFlags = {\n \/\/ Similarly, should stable imply \"classic\"?\n stable: !__EXPERIMENTAL__,\n \n+ variant: __VARIANT__,\n+\n persistent: global.__PERSISTENT__ === true,\n \n \/\/ Use this for tests that are known to be broken.\n","files":[{"path":"packages\/react-debug-tools\/src\/ReactDebugHooks.js","status":"M"},{"path":"packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberHooks.new.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberHooks.old.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactInternalTypes.js","status":"M"},{"path":"packages\/react-server\/src\/ReactFizzHooks.js","status":"M"},{"path":"packages\/react-server\/src\/ReactFlightServer.js","status":"M"},{"path":"packages\/react-suspense-test-utils\/src\/ReactSuspenseTestUtils.js","status":"M"},{"path":"packages\/react\/index.classic.fb.js","status":"M"},{"path":"packages\/react\/index.experimental.js","status":"M"},{"path":"packages\/react\/index.js","status":"M"},{"path":"packages\/react\/index.modern.fb.js","status":"M"},{"path":"packages\/react\/src\/React.js","status":"M"},{"path":"packages\/react\/src\/ReactHooks.js","status":"M"},{"path":"packages\/use-sync-external-store\/src\/__tests__\/useSyncExternalStoreShared-test.js","status":"M"},{"path":"packages\/use-sync-external-store\/src\/useSyncExternalStore.js","status":"M"},{"path":"scripts\/jest\/TestFlags.js","status":"M"}],"commit":{"revision":"77912d9a05d7a90287fabdec76486f25869b2981","authorName":"Andrew Clark","authoredAt":"2021-09-07T13:20:24-04:00","authorEmail":"git@andrewclark.io","subject":"Wire up the native API for useSyncExternalStore (#22237)","shortRevision":"77912d9a05"}}

dillon1000/react

Files changed