Skip to content

Commit 033efe7

Browse files
authored
Call get snapshot in useSyncExternalStore server shim (#22453)
* Call getSnapshot in shim * just change useSyncExternalStoreServer * remove builtInAPI Check in useSyncExternalStoreClient
1 parent 7843b14 commit 033efe7

File tree

4 files changed

+16
-30
lines changed

4 files changed

+16
-30
lines changed

packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,9 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
9292
}
9393

9494
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');
9799
});
98100
});

packages/use-sync-external-store/src/useSyncExternalStore.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,13 @@
1010
import {canUseDOM} from 'shared/ExecutionEnvironment';
1111
import {useSyncExternalStore as client} from './useSyncExternalStoreClient';
1212
import {useSyncExternalStore as server} from './useSyncExternalStoreServer';
13+
import * as React from 'react';
1314

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
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,7 @@ import is from 'shared/objectIs';
1212

1313
// Intentionally not using named imports because Rollup uses dynamic
1414
// 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;
3116

3217
let didWarnOld18Alpha = false;
3318
let didWarnUncachedGetSnapshot = false;
@@ -42,7 +27,7 @@ let didWarnUncachedGetSnapshot = false;
4227
//
4328
// Do not assume that the clever hacks used by this hook also work in general.
4429
// 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>(
4631
subscribe: (() => void) => () => void,
4732
getSnapshot: () => T,
4833
// Note: The client shim does not use getServerSnapshot, because pre-18

packages/use-sync-external-store/src/useSyncExternalStoreServer.js

+1-10
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,10 @@
77
* @flow
88
*/
99

10-
import invariant from 'shared/invariant';
11-
1210
export function useSyncExternalStore<T>(
1311
subscribe: (() => void) => () => void,
1412
getSnapshot: () => T,
1513
getServerSnapshot?: () => T,
1614
): 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();
2516
}

0 commit comments

Comments
 (0)