diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js index 254d5f27eb72..e5e25d49eef1 100644 --- a/packages/react-client/src/__tests__/ReactFlight-test.js +++ b/packages/react-client/src/__tests__/ReactFlight-test.js @@ -513,9 +513,9 @@ describe('ReactFlight', () => { }); describe('Hooks', () => { - function DivWithId() { + function DivWithId({children}) { const id = React.useId(); - return
; + return
{children}
; } it('should support useId', () => { @@ -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 5fbdda8020ee..ebc71cc82324 100644 --- a/packages/react-server/src/ReactFlightHooks.js +++ b/packages/react-server/src/ReactFlightHooks.js @@ -105,11 +105,12 @@ export function getCurrentCache() { function useId(): string { if (currentRequest === null) { - throw new Error('useId can only be used while React is rendering.'); + 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) + ':'; + // use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client + return ':' + prefix + 'S' + id.toString(32) + ':'; } diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json index 7a93b9a0ac64..a8c8810bbe49 100644 --- a/scripts/error-codes/codes.json +++ b/scripts/error-codes/codes.json @@ -417,5 +417,6 @@ "429": "ServerContext: %s already defined", "430": "ServerContext can only have a value prop and children. Found: %s", "431": "React elements are not allowed in ServerContext", - "432": "This Suspense boundary was aborted by the server" + "432": "This Suspense boundary was aborted by the server", + "433": "useId can only be used while React is rendering" }