diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js index a04198a28445b..254d5f27eb725 100644 --- a/packages/react-client/src/__tests__/ReactFlight-test.js +++ b/packages/react-client/src/__tests__/ReactFlight-test.js @@ -534,8 +534,8 @@ describe('ReactFlight', () => { }); expect(ReactNoop).toMatchRenderedOutput( <> -
-
+
+
, ); }); @@ -558,8 +558,8 @@ describe('ReactFlight', () => { }); expect(ReactNoop).toMatchRenderedOutput( <> -
-
+
+
, ); }); diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js index ae7666d19ecf4..5fbdda8020eef 100644 --- a/packages/react-server/src/ReactFlightHooks.js +++ b/packages/react-server/src/ReactFlightHooks.js @@ -13,20 +13,14 @@ import type {ReactServerContext} from 'shared/ReactTypes'; import {REACT_SERVER_CONTEXT_TYPE} from 'shared/ReactSymbols'; import {readContext as readContextImpl} from './ReactFlightNewContext'; -let currentIndentifierPrefix = '$'; -let currentIndentifierCount = 0; +let currentRequest = null; export function prepareToUseHooksForRequest(request: Request) { - if (request.identifierPrefix) { - currentIndentifierPrefix = request.identifierPrefix; - } - currentIndentifierCount = request.identifierCount; + currentRequest = request; } -export function resetHooksForRequest(request: Request) { - currentIndentifierPrefix = '$'; - request.identifierCount = currentIndentifierCount; - currentIndentifierCount = 0; +export function resetHooksForRequest() { + currentRequest = null; } function readContext(context: ReactServerContext): T { @@ -110,10 +104,12 @@ export function getCurrentCache() { } function useId(): string { - return ( - ':' + - currentIndentifierPrefix + - ':F' + - (currentIndentifierCount++).toString(32) - ); + if (currentRequest === null) { + throw new Error('useId can only be used while React is rendering.'); + } + const prefix = currentRequest.identifierPrefix + ? currentRequest.identifierPrefix + : ''; + const id = currentRequest.identifierCount++; + return ':' + prefix + 'F' + id.toString(32) + ':'; } diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 700ddaa05bf35..f1253f046da81 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -851,7 +851,7 @@ function performWork(request: Request): void { } finally { ReactCurrentDispatcher.current = prevDispatcher; setCurrentCache(prevCache); - resetHooksForRequest(request); + resetHooksForRequest(); } }