Call get snapshot in useSyncExternalStore server shim (#22453)
* Call getSnapshot in shim * just change useSyncExternalStoreServer * remove builtInAPI Check in useSyncExternalStoreClient
salazarm committed
Sep 28, 2021 at 21:32 UTC
033efe7312cdf73118922b279d9b1ae29a2f693d
4 files changed
+16
-30
packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
+4
-2
@@ -92,7 +92,9 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
92
}
93
94
const html = ReactDOMServer.renderToString(<App />);
95
- expect(Scheduler).toHaveYielded(['server']);
96
- expect(html).toEqual('server');
95
+
96
+ // We don't call getServerSnapshot in the shim
97
+ expect(Scheduler).toHaveYielded(['client']);
98
+ expect(html).toEqual('client');
99
});
100
});
packages/use-sync-external-store/src/useSyncExternalStore.js
+9
-1
@@ -10,5 +10,13 @@
10
import {canUseDOM} from 'shared/ExecutionEnvironment';
11
import {useSyncExternalStore as client} from './useSyncExternalStoreClient';
12
import {useSyncExternalStore as server} from './useSyncExternalStoreServer';
13
+import * as React from 'react';
14
14
-export const useSyncExternalStore = canUseDOM ? client : server;
15
+const {unstable_useSyncExternalStore: builtInAPI} = React;
16
+
17
+export const useSyncExternalStore =
18
+ builtInAPI !== undefined
19
+ ? ((builtInAPI: any): typeof client)
20
+ : canUseDOM
21
+ ? client
22
+ : server;
packages/use-sync-external-store/src/useSyncExternalStoreClient.js
+2
-17
@@ -12,22 +12,7 @@ import is from 'shared/objectIs';
12
13
// Intentionally not using named imports because Rollup uses dynamic
14
// dispatch for CommonJS interop named imports.
15
-const {
16
- useState,
17
- useEffect,
18
- useLayoutEffect,
19
- useDebugValue,
20
- // The built-in API is still prefixed.
21
- unstable_useSyncExternalStore: builtInAPI,
22
-} = React;
23
-
24
-// Prefer the built-in API, if it exists. If it doesn't exist, then we assume
25
-// we're in version 16 or 17, so rendering is always synchronous. The shim
26
-// does not support concurrent rendering, only the built-in API.
27
-export const useSyncExternalStore =
28
- builtInAPI !== undefined
29
- ? ((builtInAPI: any): typeof useSyncExternalStore_client)
30
- : useSyncExternalStore_client;
15
+const {useState, useEffect, useLayoutEffect, useDebugValue} = React;
16
17
let didWarnOld18Alpha = false;
18
let didWarnUncachedGetSnapshot = false;
@@ -42,7 +27,7 @@ let didWarnUncachedGetSnapshot = false;
27
//
28
// Do not assume that the clever hacks used by this hook also work in general.
29
// The point of this shim is to replace the need for hacks by other libraries.
45
-function useSyncExternalStore_client<T>(
30
+export function useSyncExternalStore<T>(
31
subscribe: (() => void) => () => void,
32
getSnapshot: () => T,
33
// Note: The client shim does not use getServerSnapshot, because pre-18
packages/use-sync-external-store/src/useSyncExternalStoreServer.js
+1
-10
@@ -7,19 +7,10 @@
7
* @flow
8
*/
9
10
-import invariant from 'shared/invariant';
11
-
10
export function useSyncExternalStore<T>(
11
subscribe: (() => void) => () => void,
12
getSnapshot: () => T,
13
getServerSnapshot?: () => T,
14
): T {
17
- if (getServerSnapshot === undefined) {
18
- invariant(
19
- false,
20
- 'Missing getServerSnapshot, which is required for server-' +
21
- 'rendered content.',
22
- );
23
- }
24
- return getServerSnapshot();
15
+ return getSnapshot();
16
}