Implements useId hook for Flight server.

The approach for ids for Flight is different from Fizz/Client where there is a need for determinancy. Flight rendered elements will not be rendered on the client and as such the ids generated in a request only need to be unique. However since FLight does support refetching subtrees it is possible a client will need to patch up a part of the tree rather than replacing the entire thing so it is not safe to use a simple incrementing counter. To solve for this we allow the caller to specify a prefix. On an initial fetch it is likely this will be empty but on refetches or subtrees we expect to have a client `useId` provide the prefix since it will guaranteed be unique for that subtree and thus for the entire tree. It is also possible that we will automatically provide prefixes based on a client/Fizz useId on refetches

in addition to the core change I also modified the structure of options for renderToReadableStream where `onError`, `context`, and the new `identifierPrefix` are properties of an Options object argument to avoid the clumsiness of a growing list of optional function arguments.

Author: gnoff

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -512,6 +512,59 @@ describe('ReactFlight', () => {
     );
   });
 
+  describe('Hooks', () => {
+    function DivWithId() {
+      const id = React.useId();
+      return <div prop={id} />;
+    }
+
+    it('should support useId', () => {
+      function App() {
+        return (
+          <>
+            <DivWithId />
+            <DivWithId />
+          </>
+        );
+      }
+
+      const transport = ReactNoopFlightServer.render(<App />);
+      act(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div prop=":$:F1" />
+          <div prop=":$:F2" />
+        </>,
+      );
+    });
+
+    it('accepts an identifier prefix that prefixes generated ids', () => {
+      function App() {
+        return (
+          <>
+            <DivWithId />
+            <DivWithId />
+          </>
+        );
+      }
+
+      const transport = ReactNoopFlightServer.render(<App />, {
+        identifierPrefix: 'foo',
+      });
+      act(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div prop=":foo:F1" />
+          <div prop=":foo:F2" />
+        </>,
+      );
+    });
+  });
+
   describe('ServerContext', () => {
     // @gate enableServerContext
     it('supports basic createServerContext usage', () => {
@@ -759,15 +812,14 @@ describe('ReactFlight', () => {
       function Bar() {
         return <span>{React.useContext(ServerContext)}</span>;
       }
-      const transport = ReactNoopFlightServer.render(<Bar />, {}, [
-        ['ServerContext', 'Override'],
-      ]);
+      const transport = ReactNoopFlightServer.render(<Bar />, {
+        context: [['ServerContext', 'Override']],
+      });
 
       act(() => {
         const flightModel = ReactNoopFlightClient.read(transport);
         ReactNoop.render(flightModel);
       });
-
       expect(ReactNoop).toMatchRenderedOutput(<span>Override</span>);
     });
 

packages/react-noop-renderer/src/ReactNoopFlightServer.js

@@ -61,20 +61,19 @@ const ReactNoopFlightServer = ReactFlightServer({
 
 type Options = {
   onError?: (error: mixed) => void,
+  context?: Array<[string, ServerContextJSONValue]>,
+  identifierPrefix?: string,
 };
 
-function render(
-  model: ReactModel,
-  options?: Options,
-  context?: Array<[string, ServerContextJSONValue]>,
-): Destination {
+function render(model: ReactModel, options?: Options): Destination {
   const destination: Destination = [];
   const bundlerConfig = undefined;
   const request = ReactNoopFlightServer.createRequest(
     model,
     bundlerConfig,
     options ? options.onError : undefined,
-    context,
+    options ? options.context : undefined,
+    options ? options.identifierPrefix : undefined,
   );
   ReactNoopFlightServer.startWork(request);
   ReactNoopFlightServer.startFlowing(request, destination);

packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js

@@ -21,6 +21,7 @@ import {
 
 type Options = {
   onError?: (error: mixed) => void,
+  identifierPrefix?: string,
 };
 
 function render(
@@ -33,6 +34,8 @@ function render(
     model,
     config,
     options ? options.onError : undefined,
+    undefined, // not currently set up to supply context overrides
+    options ? options.identifierPrefix : undefined,
   );
   startWork(request);
   startFlowing(request, destination);

packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js

@@ -19,19 +19,21 @@ import {
 
 type Options = {
   onError?: (error: mixed) => void,
+  context?: Array<[string, ServerContextJSONValue]>,
+  identifierPrefix?: string,
 };
 
 function renderToReadableStream(
   model: ReactModel,
   webpackMap: BundlerConfig,
   options?: Options,
-  context?: Array<[string, ServerContextJSONValue]>,
 ): ReadableStream {
   const request = createRequest(
     model,
     webpackMap,
     options ? options.onError : undefined,
-    context,
+    options ? options.context : undefined,
+    options ? options.identifierPrefix : undefined,
   );
   const stream = new ReadableStream({
     type: 'bytes',

packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js

@@ -24,6 +24,8 @@ function createDrainHandler(destination, request) {
 
 type Options = {
   onError?: (error: mixed) => void,
+  context?: Array<[string, ServerContextJSONValue]>,
+  identifierPrefix?: string,
 };
 
 type Controls = {|
@@ -34,13 +36,13 @@ function renderToPipeableStream(
   model: ReactModel,
   webpackMap: BundlerConfig,
   options?: Options,
-  context?: Array<[string, ServerContextJSONValue]>,
 ): Controls {
   const request = createRequest(
     model,
     webpackMap,
     options ? options.onError : undefined,
-    context,
+    options ? options.context : undefined,
+    options ? options.identifierPrefix : undefined,
   );
   let hasStartedFlowing = false;
   startWork(request);

packages/react-server/src/ReactFlightHooks.js

@@ -8,10 +8,27 @@
  */
 
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
+import type {Request} from './ReactFlightServer';
 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;
+
+export function prepareToUseHooksForRequest(request: Request) {
+  if (request.identifierPrefix) {
+    currentIndentifierPrefix = request.identifierPrefix;
+  }
+  currentIndentifierCount = request.identifierCount;
+}
+
+export function resetHooksForRequest(request: Request) {
+  currentIndentifierPrefix = '$';
+  request.identifierCount = currentIndentifierCount;
+  currentIndentifierCount = 0;
+}
+
 function readContext<T>(context: ReactServerContext<T>): T {
   if (__DEV__) {
     if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
@@ -61,7 +78,7 @@ export const Dispatcher: DispatcherType = {
   useLayoutEffect: (unsupportedHook: any),
   useImperativeHandle: (unsupportedHook: any),
   useEffect: (unsupportedHook: any),
-  useId: (unsupportedHook: any),
+  useId,
   useMutableSource: (unsupportedHook: any),
   useSyncExternalStore: (unsupportedHook: any),
   useCacheRefresh(): <T>(?() => T, ?T) => void {
@@ -91,3 +108,12 @@ export function setCurrentCache(cache: Map<Function, mixed> | null) {
 export function getCurrentCache() {
   return currentCache;
 }
+
+function useId(): string {
+  return (
+    ':' +
+    currentIndentifierPrefix +
+    ':F' +
+    (currentIndentifierCount++).toString(32)
+  );
+}

packages/react-server/src/ReactFlightServer.js

@@ -39,7 +39,13 @@ import {
   isModuleReference,
 } from './ReactFlightServerConfig';
 
-import {Dispatcher, getCurrentCache, setCurrentCache} from './ReactFlightHooks';
+import {
+  Dispatcher,
+  getCurrentCache,
+  prepareToUseHooksForRequest,
+  resetHooksForRequest,
+  setCurrentCache,
+} from './ReactFlightHooks';
 import {
   pushProvider,
   popProvider,
@@ -102,14 +108,12 @@ export type Request = {
   writtenSymbols: Map<Symbol, number>,
   writtenModules: Map<ModuleKey, number>,
   writtenProviders: Map<string, number>,
+  identifierPrefix?: string,
+  identifierCount: number,
   onError: (error: mixed) => void,
   toJSON: (key: string, value: ReactModel) => ReactJSONValue,
 };
 
-export type Options = {
-  onError?: (error: mixed) => void,
-};
-
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
 function defaultErrorHandler(error: mixed) {
@@ -126,6 +130,7 @@ export function createRequest(
   bundlerConfig: BundlerConfig,
   onError: void | ((error: mixed) => void),
   context?: Array<[string, ServerContextJSONValue]>,
+  identifierPrefix?: string,
 ): Request {
   const pingedSegments = [];
   const request = {
@@ -143,6 +148,8 @@ export function createRequest(
     writtenSymbols: new Map(),
     writtenModules: new Map(),
     writtenProviders: new Map(),
+    identifierPrefix,
+    identifierCount: 1,
     onError: onError === undefined ? defaultErrorHandler : onError,
     toJSON: function(key: string, value: ReactModel): ReactJSONValue {
       return resolveModelToJSON(request, this, key, value);
@@ -826,6 +833,7 @@ function performWork(request: Request): void {
   const prevCache = getCurrentCache();
   ReactCurrentDispatcher.current = Dispatcher;
   setCurrentCache(request.cache);
+  prepareToUseHooksForRequest(request);
 
   try {
     const pingedSegments = request.pingedSegments;
@@ -843,6 +851,7 @@ function performWork(request: Request): void {
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
     setCurrentCache(prevCache);
+    resetHooksForRequest(request);
   }
 }