Scaffolding for useFormState

This exposes, but does not yet implement, a new experimental API called
useFormState. It's gated behind the enableAsyncActions flag.

useFormState has a similar signature to useReducer, except instead of a reducer
it accepts an (async) action function. React will wait until the promise
resolves before updating the state:

  async function action(prevState, payload) {
    // ..
  }
  const [state, dispatch] = useFormState(action, initialState)

When used in combination with Server Actions, it will also support progressive
enhancement — a form that is submitted before it has hydrated will have its
state transferred to the next page. However, like the other action-related
hooks, it works with fully client-driven actions, too.

Author: acdlite

.eslintrc.js

@@ -456,6 +456,7 @@ module.exports = {
     $ReadOnlyArray: 'readonly',
     $ArrayBufferView: 'readonly',
     $Shape: 'readonly',
+    ReturnType: 'readonly',
     AnimationFrameID: 'readonly',
     // For Flow type annotation. Only `BigInt` is valid at runtime.
     bigint: 'readonly',

packages/react-dom-bindings/src/shared/ReactDOMFormActions.js

@@ -74,3 +74,17 @@ export function useFormStatus(): FormStatus {
     return dispatcher.useHostTransitionStatus();
   }
 }
+
+export function useFormState<S, P>(
+  action: (S, P) => S,
+  initialState: S,
+  url?: string,
+): [S, (P) => void] {
+  if (!(enableFormActions && enableAsyncActions)) {
+    throw new Error('Not implemented.');
+  } else {
+    const dispatcher = resolveDispatcher();
+    // $FlowFixMe[not-a-function] This is unstable, thus optional
+    return dispatcher.useFormState(action, initialState, url);
+  }
+}

packages/react-dom/index.classic.fb.js

@@ -32,6 +32,7 @@ export {
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
   useFormStatus as experimental_useFormStatus,
+  useFormState as experimental_useFormState,
   prefetchDNS,
   preconnect,
   preload,

packages/react-dom/index.experimental.js

@@ -21,6 +21,7 @@ export {
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
   useFormStatus as experimental_useFormStatus,
+  useFormState as experimental_useFormState,
   prefetchDNS,
   preconnect,
   preload,

packages/react-dom/index.js

@@ -24,6 +24,7 @@ export {
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
   useFormStatus as experimental_useFormStatus,
+  useFormState as experimental_useFormState,
   prefetchDNS,
   preconnect,
   preload,

packages/react-dom/index.modern.fb.js

@@ -17,6 +17,7 @@ export {
   unstable_createEventHandle,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
   useFormStatus as experimental_useFormStatus,
+  useFormState as experimental_useFormState,
   prefetchDNS,
   preconnect,
   preload,

packages/react-dom/server-rendering-stub.js

@@ -23,5 +23,6 @@ export {
   preload,
   preinit,
   experimental_useFormStatus,
+  experimental_useFormState,
   unstable_batchedUpdates,
 } from './src/server/ReactDOMServerRenderingStub';

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

@@ -23,6 +23,7 @@ let ReactDOMServer;
 let ReactDOMClient;
 let useFormStatus;
 let useOptimistic;
+let useFormState;
 
 describe('ReactDOMFizzForm', () => {
   beforeEach(() => {
@@ -31,6 +32,7 @@ describe('ReactDOMFizzForm', () => {
     ReactDOMServer = require('react-dom/server.browser');
     ReactDOMClient = require('react-dom/client');
     useFormStatus = require('react-dom').experimental_useFormStatus;
+    useFormState = require('react-dom').experimental_useFormState;
     useOptimistic = require('react').experimental_useOptimistic;
     act = require('internal-test-utils').act;
     container = document.createElement('div');
@@ -470,6 +472,27 @@ describe('ReactDOMFizzForm', () => {
     expect(container.textContent).toBe('hi');
   });
 
+  // @gate enableAsyncActions
+  it('useFormState returns initial state', async () => {
+    async function action(state) {
+      return state;
+    }
+
+    function App() {
+      const [state] = useFormState(action, 0);
+      return state;
+    }
+
+    const stream = await ReactDOMServer.renderToReadableStream(<App />);
+    await readIntoContainer(stream);
+    expect(container.textContent).toBe('0');
+
+    await act(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />);
+    });
+    expect(container.textContent).toBe('0');
+  });
+
   // @gate enableFormActions
   it('can provide a custom action on the server for actions', async () => {
     const ref = React.createRef();

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

@@ -40,6 +40,7 @@ describe('ReactDOMForm', () => {
   let startTransition;
   let textCache;
   let useFormStatus;
+  let useFormState;
 
   beforeEach(() => {
     jest.resetModules();
@@ -53,6 +54,7 @@ describe('ReactDOMForm', () => {
     Suspense = React.Suspense;
     startTransition = React.startTransition;
     useFormStatus = ReactDOM.experimental_useFormStatus;
+    useFormState = ReactDOM.experimental_useFormState;
     container = document.createElement('div');
     document.body.appendChild(container);
 
@@ -969,4 +971,23 @@ describe('ReactDOMForm', () => {
       'A React form was unexpectedly submitted. If you called form.submit()',
     );
   });
+
+  // @gate enableAsyncActions
+  test('useFormState exists', async () => {
+    // TODO: Not yet implemented. This just tests that the API is wired up.
+
+    async function action(state) {
+      return state;
+    }
+
+    function App() {
+      const [state] = useFormState(action, 0);
+      return <Text text={state} />;
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+    assertLog([0]);
+    expect(container.textContent).toBe('0');
+  });
 });

packages/react-dom/src/client/ReactDOM.js

@@ -63,7 +63,10 @@ export {
   preinit,
   preinitModule,
 } from '../shared/ReactDOMFloat';
-export {useFormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
+export {
+  useFormStatus,
+  useFormState,
+} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
 
 if (__DEV__) {
   if (

packages/react-dom/src/server/ReactDOMServerRenderingStub.js

@@ -13,7 +13,10 @@ export {
   preconnect,
   prefetchDNS,
 } from '../shared/ReactDOMFloat';
-export {useFormStatus as experimental_useFormStatus} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
+export {
+  useFormStatus as experimental_useFormStatus,
+  useFormState as experimental_useFormState,
+} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
 
 export function createPortal() {
   throw new Error(

packages/react-reconciler/src/ReactFiberHooks.js

@@ -1835,6 +1835,37 @@ function rerenderOptimistic<S, A>(
   return [passthrough, dispatch];
 }
 
+function TODO_formStateDispatch() {
+  throw new Error('Not implemented.');
+}
+
+function mountFormState<S, P>(
+  action: (S, P) => S,
+  initialState: S,
+  url?: string,
+): [S, (P) => void] {
+  // TODO: Not yet implemented
+  return [initialState, TODO_formStateDispatch];
+}
+
+function updateFormState<S, P>(
+  action: (S, P) => S,
+  initialState: S,
+  url?: string,
+): [S, (P) => void] {
+  // TODO: Not yet implemented
+  return [initialState, TODO_formStateDispatch];
+}
+
+function rerenderFormState<S, P>(
+  action: (S, P) => S,
+  initialState: S,
+  url?: string,
+): [S, (P) => void] {
+  // TODO: Not yet implemented
+  return [initialState, TODO_formStateDispatch];
+}
+
 function pushEffect(
   tag: HookFlags,
   create: () => (() => void) | void,
@@ -2984,6 +3015,7 @@ if (enableFormActions && enableAsyncActions) {
 }
 if (enableAsyncActions) {
   (ContextOnlyDispatcher: Dispatcher).useOptimistic = throwInvalidHookError;
+  (ContextOnlyDispatcher: Dispatcher).useFormState = throwInvalidHookError;
 }
 
 const HooksDispatcherOnMount: Dispatcher = {
@@ -3021,6 +3053,7 @@ if (enableFormActions && enableAsyncActions) {
 }
 if (enableAsyncActions) {
   (HooksDispatcherOnMount: Dispatcher).useOptimistic = mountOptimistic;
+  (HooksDispatcherOnMount: Dispatcher).useFormState = mountFormState;
 }
 
 const HooksDispatcherOnUpdate: Dispatcher = {
@@ -3058,6 +3091,7 @@ if (enableFormActions && enableAsyncActions) {
 }
 if (enableAsyncActions) {
   (HooksDispatcherOnUpdate: Dispatcher).useOptimistic = updateOptimistic;
+  (HooksDispatcherOnUpdate: Dispatcher).useFormState = updateFormState;
 }
 
 const HooksDispatcherOnRerender: Dispatcher = {
@@ -3095,6 +3129,7 @@ if (enableFormActions && enableAsyncActions) {
 }
 if (enableAsyncActions) {
   (HooksDispatcherOnRerender: Dispatcher).useOptimistic = rerenderOptimistic;
+  (HooksDispatcherOnRerender: Dispatcher).useFormState = rerenderFormState;
 }
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
@@ -3287,6 +3322,16 @@ if (__DEV__) {
         mountHookTypesDev();
         return mountOptimistic(passthrough, reducer);
       };
+    (HooksDispatcherOnMountInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => S,
+        initialState: S,
+        url?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        mountHookTypesDev();
+        return mountFormState(action, initialState, url);
+      };
   }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
@@ -3447,6 +3492,16 @@ if (__DEV__) {
         updateHookTypesDev();
         return mountOptimistic(passthrough, reducer);
       };
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => S,
+        initialState: S,
+        url?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        updateHookTypesDev();
+        return mountFormState(action, initialState, url);
+      };
   }
 
   HooksDispatcherOnUpdateInDEV = {
@@ -3609,6 +3664,16 @@ if (__DEV__) {
         updateHookTypesDev();
         return updateOptimistic(passthrough, reducer);
       };
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => S,
+        initialState: S,
+        url?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        updateHookTypesDev();
+        return updateFormState(action, initialState, url);
+      };
   }
 
   HooksDispatcherOnRerenderInDEV = {
@@ -3771,6 +3836,16 @@ if (__DEV__) {
         updateHookTypesDev();
         return rerenderOptimistic(passthrough, reducer);
       };
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => S,
+        initialState: S,
+        url?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        updateHookTypesDev();
+        return rerenderFormState(action, initialState, url);
+      };
   }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
@@ -3955,6 +4030,17 @@ if (__DEV__) {
         mountHookTypesDev();
         return mountOptimistic(passthrough, reducer);
       };
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => S,
+        initialState: S,
+        url?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        warnInvalidHookAccess();
+        mountHookTypesDev();
+        return mountFormState(action, initialState, url);
+      };
   }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
@@ -4142,6 +4228,17 @@ if (__DEV__) {
         updateHookTypesDev();
         return updateOptimistic(passthrough, reducer);
       };
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => S,
+        initialState: S,
+        url?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return updateFormState(action, initialState, url);
+      };
   }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
@@ -4329,5 +4426,16 @@ if (__DEV__) {
         updateHookTypesDev();
         return rerenderOptimistic(passthrough, reducer);
       };
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useFormState =
+      function useFormState<S, P>(
+        action: (S, P) => S,
+        initialState: S,
+        url?: string,
+      ): [S, (P) => void] {
+        currentHookNameInDev = 'useFormState';
+        warnInvalidHookAccess();
+        updateHookTypesDev();
+        return rerenderFormState(action, initialState, url);
+      };
   }
 }

packages/react-reconciler/src/ReactInternalTypes.js

@@ -53,7 +53,8 @@ export type HookType =
   | 'useSyncExternalStore'
   | 'useId'
   | 'useCacheRefresh'
-  | 'useOptimistic';
+  | 'useOptimistic'
+  | 'useFormState';
 
 export type ContextDependency<T> = {
   context: ReactContext<T>,
@@ -413,6 +414,11 @@ export type Dispatcher = {
     passthrough: S,
     reducer: ?(S, A) => S,
   ) => [S, (A) => void],
+  useFormState?: <S, P>(
+    action: (S, P) => S,
+    initialState: S,
+    url?: string,
+  ) => [S, (P) => void],
 };
 
 export type CacheDispatcher = {