defend against useId call outside of rendering

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

Hide file tree

Showing 3 changed files with 17 additions and 21 deletions.
diff --git 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(
         <>
-          <div prop=":$:F1" />
-          <div prop=":$:F2" />
+          <div prop=":F1:" />
+          <div prop=":F2:" />
         </>,
       );
     });
@@ -558,8 +558,8 @@ describe('ReactFlight', () => {
       });
       expect(ReactNoop).toMatchRenderedOutput(
         <>
-          <div prop=":foo:F1" />
-          <div prop=":foo:F2" />
+          <div prop=":fooF1:" />
+          <div prop=":fooF2:" />
         </>,
       );
     });

diff --git 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<T>(context: ReactServerContext<T>): 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
@@ -851,7 +851,7 @@ function performWork(request: Request): void {
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
     setCurrentCache(prevCache);
-    resetHooksForRequest(request);
+    resetHooksForRequest();
   }
 }