diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index 254d5f27eb725..e5e25d49eef15 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 5fbdda8020eef..ebc71cc82324c 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 92d3bfd128c8a..7a60b5b310561 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -416,5 +416,6 @@
"428": "useServerContext is only supported while rendering.",
"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"
+ "431": "React elements are not allowed in ServerContext",
+ "432": "useId can only be used while React is rendering"
}