switch to S from F for Server Component ids

facebook · Mar 28, 2022 · 1a1ec75 · 1a1ec75
1 parent 0cfea27
commit 1a1ec75
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git 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 <div prop={id} />;
+      return <div prop={id}>{children}</div>;
     }
 
     it('should support useId', () => {
@@ -534,8 +534,8 @@ describe('ReactFlight', () => {
       });
       expect(ReactNoop).toMatchRenderedOutput(
         <>
-          <div prop=":F1:" />
-          <div prop=":F2:" />
+          <div prop=":S1:" />
+          <div prop=":S2:" />
         </>,
       );
     });
@@ -558,8 +558,8 @@ describe('ReactFlight', () => {
       });
       expect(ReactNoop).toMatchRenderedOutput(
         <>
-          <div prop=":fooF1:" />
-          <div prop=":fooF2:" />
+          <div prop=":fooS1:" />
+          <div prop=":fooS2:" />
         </>,
       );
     });

diff --git 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
@@ -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"
 }