Add stub for experimental_useOptimisticState

Actual name TBD.

packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js

@@ -22,6 +22,7 @@ let React;
 let ReactDOMServer;
 let ReactDOMClient;
 let useFormStatus;
+let useOptimisticState;
 
 describe('ReactDOMFizzForm', () => {
   beforeEach(() => {
@@ -30,6 +31,7 @@ describe('ReactDOMFizzForm', () => {
     ReactDOMServer = require('react-dom/server.browser');
     ReactDOMClient = require('react-dom/client');
     useFormStatus = require('react-dom').experimental_useFormStatus;
+    useOptimisticState = require('react').experimental_useOptimisticState;
     act = require('internal-test-utils').act;
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -453,4 +455,21 @@ describe('ReactDOMFizzForm', () => {
     expect(deletedTitle).toBe('Hello');
     expect(rootActionCalled).toBe(false);
   });
+
+  // @gate enableAsyncActions
+  it('useOptimisticState returns passthrough value', async () => {
+    function App() {
+      const [optimisticState] = useOptimisticState('hi');
+      return optimisticState;
+    }
+
+    const stream = await ReactDOMServer.renderToReadableStream(<App />);
+    await readIntoContainer(stream);
+    expect(container.textContent).toBe('hi');
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(container.textContent).toBe('hi');
+  });
 });

packages/react-reconciler/src/ReactFiberHooks.js

@@ -1918,6 +1918,30 @@ function rerenderState<S>(
   return rerenderReducer(basicStateReducer, (initialState: any));
 }
 
+function mountOptimisticState<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  // $FlowFixMe - TODO: Actual implementation
+  return mountState(passthrough);
+}
+
+function updateOptimisticState<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  // $FlowFixMe - TODO: Actual implementation
+  return updateState(passthrough);
+}
+
+function rerenderOptimisticState<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  // $FlowFixMe - TODO: Actual implementation
+  return rerenderState(passthrough);
+}
+
 function pushEffect(
   tag: HookFlags,
   create: () => (() => void) | void,
@@ -2989,6 +3013,10 @@ if (enableFormActions && enableAsyncActions) {
   (ContextOnlyDispatcher: Dispatcher).useHostTransitionStatus =
     throwInvalidHookError;
 }
+if (enableAsyncActions) {
+  (ContextOnlyDispatcher: Dispatcher).useOptimisticState =
+    throwInvalidHookError;
+}
 
 const HooksDispatcherOnMount: Dispatcher = {
   readContext,
@@ -3024,6 +3052,11 @@ if (enableFormActions && enableAsyncActions) {
   (HooksDispatcherOnMount: Dispatcher).useHostTransitionStatus =
     useHostTransitionStatus;
 }
+if (enableAsyncActions) {
+  (HooksDispatcherOnMount: Dispatcher).useOptimisticState =
+    mountOptimisticState;
+}
+
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
 
@@ -3058,6 +3091,10 @@ if (enableFormActions && enableAsyncActions) {
   (HooksDispatcherOnUpdate: Dispatcher).useHostTransitionStatus =
     useHostTransitionStatus;
 }
+if (enableAsyncActions) {
+  (HooksDispatcherOnUpdate: Dispatcher).useOptimisticState =
+    updateOptimisticState;
+}
 
 const HooksDispatcherOnRerender: Dispatcher = {
   readContext,
@@ -3093,6 +3130,10 @@ if (enableFormActions && enableAsyncActions) {
   (HooksDispatcherOnRerender: Dispatcher).useHostTransitionStatus =
     useHostTransitionStatus;
 }
+if (enableAsyncActions) {
+  (HooksDispatcherOnRerender: Dispatcher).useOptimisticState =
+    rerenderOptimisticState;
+}
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
 let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
@@ -3283,6 +3324,17 @@ if (__DEV__) {
     (HooksDispatcherOnMountInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
   }
+  if (enableAsyncActions) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).useOptimisticState =
+      function useOptimisticState<S, A>(
+        passthrough: S,
+        reducer: ?(S, A) => S,
+      ): [S, (A) => void] {
+        currentHookNameInDev = 'useOptimisticState';
+        mountHookTypesDev();
+        return mountOptimisticState(passthrough, reducer);
+      };
+  }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3441,6 +3493,17 @@ if (__DEV__) {
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
   }
+  if (enableAsyncActions) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useOptimisticState =
+      function useOptimisticState<S, A>(
+        passthrough: S,
+        reducer: ?(S, A) => S,
+      ): [S, (A) => void] {
+        currentHookNameInDev = 'useOptimisticState';
+        updateHookTypesDev();
+        return mountOptimisticState(passthrough, reducer);
+      };
+  }
 
   HooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3601,6 +3664,17 @@ if (__DEV__) {
     (HooksDispatcherOnUpdateInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
   }
+  if (enableAsyncActions) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).useOptimisticState =
+      function useOptimisticState<S, A>(
+        passthrough: S,
+        reducer: ?(S, A) => S,
+      ): [S, (A) => void] {
+        currentHookNameInDev = 'useOptimisticState';
+        updateHookTypesDev();
+        return updateOptimisticState(passthrough, reducer);
+      };
+  }
 
   HooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3761,6 +3835,17 @@ if (__DEV__) {
     (HooksDispatcherOnRerenderInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
   }
+  if (enableAsyncActions) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).useOptimisticState =
+      function useOptimisticState<S, A>(
+        passthrough: S,
+        reducer: ?(S, A) => S,
+      ): [S, (A) => void] {
+        currentHookNameInDev = 'useOptimisticState';
+        updateHookTypesDev();
+        return rerenderOptimisticState(passthrough, reducer);
+      };
+  }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3943,6 +4028,18 @@ if (__DEV__) {
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
   }
+  if (enableAsyncActions) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useOptimisticState =
+      function useOptimisticState<S, A>(
+        passthrough: S,
+        reducer: ?(S, A) => S,
+      ): [S, (A) => void] {
+        currentHookNameInDev = 'useOptimisticState';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountOptimisticState(passthrough, reducer);
+      };
+  }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -4128,6 +4225,18 @@ if (__DEV__) {
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
   }
+  if (enableAsyncActions) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useOptimisticState =
+      function useOptimisticState<S, A>(
+        passthrough: S,
+        reducer: ?(S, A) => S,
+      ): [S, (A) => void] {
+        currentHookNameInDev = 'useOptimisticState';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateOptimisticState(passthrough, reducer);
+      };
+  }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -4313,4 +4422,16 @@ if (__DEV__) {
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useHostTransitionStatus =
       useHostTransitionStatus;
   }
+  if (enableAsyncActions) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useOptimisticState =
+      function useOptimisticState<S, A>(
+        passthrough: S,
+        reducer: ?(S, A) => S,
+      ): [S, (A) => void] {
+        currentHookNameInDev = 'useOptimisticState';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return rerenderOptimisticState(passthrough, reducer);
+      };
+  }
 }

packages/react-reconciler/src/ReactInternalTypes.js

@@ -57,7 +57,8 @@ export type HookType =
   | 'useMutableSource'
   | 'useSyncExternalStore'
   | 'useId'
-  | 'useCacheRefresh';
+  | 'useCacheRefresh'
+  | 'useOptimisticState';
 
 export type ContextDependency<T> = {
   context: ReactContext<T>,
@@ -423,6 +424,10 @@ export type Dispatcher = {
   useCacheRefresh?: () => <T>(?() => T, ?T) => void,
   useMemoCache?: (size: number) => Array<any>,
   useHostTransitionStatus?: () => TransitionStatus,
+  useOptimisticState?: <S, A>(
+    passthrough: S,
+    reducer: ?(S, A) => S,
+  ) => [S, (A) => void],
 };
 
 export type CacheDispatcher = {

packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js

@@ -5,6 +5,7 @@ let act;
 let assertLog;
 let useTransition;
 let useState;
+let useOptimisticState;
 let textCache;
 
 describe('ReactAsyncActions', () => {
@@ -18,6 +19,7 @@ describe('ReactAsyncActions', () => {
     assertLog = require('internal-test-utils').assertLog;
     useTransition = React.useTransition;
     useState = React.useState;
+    useOptimisticState = React.experimental_useOptimisticState;
 
     textCache = new Map();
   });
@@ -644,4 +646,19 @@ describe('ReactAsyncActions', () => {
       </>,
     );
   });
+
+  // @gate enableAsyncActions
+  test('useOptimisticState exists', async () => {
+    // This API isn't implemented yet. This just tests that it's wired
+    // up correctly.
+    function App() {
+      const [text] = useOptimisticState('Hi');
+      return <Text text={text} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => root.render(<App />));
+    assertLog(['Hi']);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
 });

packages/react-server/src/ReactFizzHooks.js

@@ -553,6 +553,18 @@ function useHostTransitionStatus(): TransitionStatus {
   return NotPendingTransition;
 }
 
+function unsupportedSetOptimisticState() {
+  throw new Error('Cannot update optimistic state while rendering.');
+}
+
+function useOptimisticState<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  resolveCurrentlyRenderingComponent();
+  return [passthrough, unsupportedSetOptimisticState];
+}
+
 function useId(): string {
   const task: Task = (currentlyRenderingTask: any);
   const treeId = getTreeId(task.treeContext);
@@ -652,6 +664,9 @@ if (enableUseMemoCacheHook) {
 if (enableFormActions && enableAsyncActions) {
   HooksDispatcher.useHostTransitionStatus = useHostTransitionStatus;
 }
+if (enableAsyncActions) {
+  HooksDispatcher.useOptimisticState = useOptimisticState;
+}
 
 export let currentResponseState: null | ResponseState = (null: any);
 export function setCurrentResponseState(

packages/react/index.classic.fb.js

@@ -59,6 +59,7 @@ export {
   useMemo,
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
+  experimental_useOptimisticState,
   useReducer,
   useRef,
   useState,

packages/react/index.experimental.js

@@ -49,6 +49,7 @@ export {
   useInsertionEffect,
   useLayoutEffect,
   useMemo,
+  experimental_useOptimisticState,
   useReducer,
   useRef,
   useState,

packages/react/index.js

@@ -77,6 +77,7 @@ export {
   useLayoutEffect,
   useMemo,
   useMutableSource,
+  experimental_useOptimisticState,
   useSyncExternalStore,
   useReducer,
   useRef,

packages/react/index.modern.fb.js

@@ -57,6 +57,7 @@ export {
   useMemo,
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
+  experimental_useOptimisticState,
   useReducer,
   useRef,
   useState,

packages/react/src/React.js

@@ -59,6 +59,7 @@ import {
   useCacheRefresh,
   use,
   useMemoCache,
+  useOptimisticState,
 } from './ReactHooks';
 import {
   createElementWithValidation,
@@ -112,6 +113,7 @@ export {
   useLayoutEffect,
   useMemo,
   useMutableSource,
+  useOptimisticState as experimental_useOptimisticState,
   useSyncExternalStore,
   useReducer,
   useRef,

packages/react/src/ReactHooks.js

@@ -241,3 +241,12 @@ export function useEffectEvent<Args, F: (...Array<Args>) => mixed>(
   // $FlowFixMe[not-a-function] This is unstable, thus optional
   return dispatcher.useEffectEvent(callback);
 }
+
+export function useOptimisticState<S, A>(
+  passthrough: S,
+  reducer: ?(S, A) => S,
+): [S, (A) => void] {
+  const dispatcher = resolveDispatcher();
+  // $FlowFixMe[not-a-function] This is unstable, thus optional
+  return dispatcher.useOptimisticState(passthrough, reducer);
+}

scripts/error-codes/codes.json

@@ -463,5 +463,6 @@
   "475": "Internal React Error: suspendedState null when it was expected to exists. Please report this as a React bug.",
   "476": "Expected the form instance to be a HostComponent. This is a bug in React.",
   "477": "React Internal Error: processHintChunk is not implemented for Native-Relay. The fact that this method was called means there is a bug in React.",
-  "478": "Thenable should have already resolved. This is a bug in React."
+  "478": "Thenable should have already resolved. This is a bug in React.",
+  "479": "Cannot update optimistic state while rendering."
 }