Shim commonly used Hooks that are safe

packages/react-server/src/ReactFlightServer.js

@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
 import type {
   Destination,
   Chunk,
@@ -46,6 +47,7 @@ import {
 } from 'shared/ReactSymbols';
 
 import * as React from 'react';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
 
 type ReactJSONValue =
@@ -85,6 +87,8 @@ export type Request = {
   toJSON: (key: string, value: ReactModel) => ReactJSONValue,
 };
 
+const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+
 export function createRequest(
   model: ReactModel,
   destination: Destination,
@@ -269,9 +273,11 @@ export function resolveModelToJSON(
     value !== null &&
     value.$$typeof === REACT_ELEMENT_TYPE
   ) {
+    const prevDispatcher = ReactCurrentDispatcher.current;
     // TODO: Concatenate keys of parents onto children.
     const element: React$Element<any> = (value: any);
     try {
+      ReactCurrentDispatcher.current = Dispatcher;
       // Attempt to render the server component.
       value = attemptResolveElement(element);
     } catch (x) {
@@ -286,6 +292,8 @@ export function resolveModelToJSON(
         // Something errored. Don't bother encoding anything up to here.
         throw x;
       }
+    } finally {
+      ReactCurrentDispatcher.current = prevDispatcher;
     }
   }
 
@@ -411,3 +419,33 @@ export function startFlowing(request: Request): void {
   request.flowing = true;
   flushCompletedChunks(request);
 }
+
+function unsupportedHook(): void {
+  invariant(false, 'This Hook is not supported in Server Components.');
+}
+
+const Dispatcher: DispatcherType = {
+  useMemo<T>(nextCreate: () => T): T {
+    return nextCreate();
+  },
+  useCallback<T>(callback: T): T {
+    return callback;
+  },
+  useDebugValue(): void {},
+  useDeferredValue<T>(value: T): T {
+    return value;
+  },
+  useTransition(): [(callback: () => void) => void, boolean] {
+    return [false, () => {}];
+  },
+  readContext: unsupportedHook,
+  useContext: unsupportedHook,
+  useReducer: unsupportedHook,
+  useRef: unsupportedHook,
+  useState: unsupportedHook,
+  useLayoutEffect: unsupportedHook,
+  useImperativeHandle: unsupportedHook,
+  useEffect: unsupportedHook,
+  useOpaqueIdentifier: unsupportedHook,
+  useMutableSource: unsupportedHook,
+};

packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js

@@ -184,4 +184,33 @@ describe('ReactFlightDOMRelay', () => {
       },
     });
   });
+
+  it('can handle a subset of Hooks', () => {
+    const {useMemo, useCallback} = React;
+    function Inner({x}) {
+      const foo = useMemo(() => x + x, [x]);
+      const bar = useCallback(() => 10 + foo, [foo]);
+      return bar();
+    }
+
+    function Foo() {
+      return {
+        bar: <Inner x={2} />,
+      };
+    }
+    const transport = [];
+    ReactDOMFlightRelayServer.render(
+      {
+        foo: <Foo />,
+      },
+      transport,
+    );
+
+    const model = readThrough(transport);
+    expect(model).toEqual({
+      foo: {
+        bar: 14,
+      },
+    });
+  });
 });

scripts/error-codes/codes.json

@@ -360,5 +360,6 @@
   "369": "ReactDOM.createEventHandle: setter called on an invalid target. Provide a valid EventTarget or an element managed by React.",
   "370": "ReactDOM.createEventHandle: setter called with an invalid callback. The callback must be a function.",
   "371": "Text string must be rendered within a <Text> component.\n\nText: %s",
-  "372": "Cannot call unstable_createEventHandle with \"%s\", as it is not an event known to React."
+  "372": "Cannot call unstable_createEventHandle with \"%s\", as it is not an event known to React.",
+  "373": "This Hook is not supported in Server Components."
 }