Add pending state to useFormState (#28514)

## Overview

Adds a `pending` state to useFormState, which will be replaced by
`useActionState` in the next diff. We will keep `useFormState` around
for backwards compatibility, but functionally it will work the same as
`useActionState`, which has an `isPending` state returned.

DiffTrain build for commit 17eaaca.

Author: rickhanlonii

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js

@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<a8e13b4ae0027a62588426b400d5b877>>
+ * @generated SignedSource<<6ab290eb8548e08a74bf8def3f649394>>
  */
 
 "use strict";
@@ -8476,7 +8476,13 @@ if (__DEV__) {
     } // useFormState actions run sequentially, because each action receives the
     // previous state as an argument. We store pending actions on a queue.
 
-    function dispatchFormState(fiber, actionQueue, setState, payload) {
+    function dispatchFormState(
+      fiber,
+      actionQueue,
+      setPendingState,
+      setState,
+      payload
+    ) {
       if (isRenderPhaseUpdate(fiber)) {
         throw new Error("Cannot update form state while rendering.");
       }
@@ -8491,7 +8497,7 @@ if (__DEV__) {
           next: null // circular
         };
         newLast.next = actionQueue.pending = newLast;
-        runFormStateAction(actionQueue, setState, payload);
+        runFormStateAction(actionQueue, setPendingState, setState, payload);
       } else {
         // There's already an action running. Add to the queue.
         var first = last.next;
@@ -8503,7 +8509,12 @@ if (__DEV__) {
       }
     }
 
-    function runFormStateAction(actionQueue, setState, payload) {
+    function runFormStateAction(
+      actionQueue,
+      setPendingState,
+      setState,
+      payload
+    ) {
       var action = actionQueue.action;
       var prevState = actionQueue.state; // This is a fork of startTransition
 
@@ -8515,7 +8526,10 @@ if (__DEV__) {
 
       {
         ReactCurrentBatchConfig$2.transition._updatedFibers = new Set();
-      }
+      } // Optimistically update the pending state, similar to useTransition.
+      // This will be reverted automatically when all actions are finished.
+
+      setPendingState(true);
 
       try {
         var returnValue = action(prevState, payload);
@@ -8532,18 +8546,26 @@ if (__DEV__) {
           thenable.then(
             function (nextState) {
               actionQueue.state = nextState;
-              finishRunningFormStateAction(actionQueue, setState);
+              finishRunningFormStateAction(
+                actionQueue,
+                setPendingState,
+                setState
+              );
             },
             function () {
-              return finishRunningFormStateAction(actionQueue, setState);
+              return finishRunningFormStateAction(
+                actionQueue,
+                setPendingState,
+                setState
+              );
             }
           );
           setState(thenable);
         } else {
           setState(returnValue);
           var nextState = returnValue;
           actionQueue.state = nextState;
-          finishRunningFormStateAction(actionQueue, setState);
+          finishRunningFormStateAction(actionQueue, setPendingState, setState);
         }
       } catch (error) {
         // This is a trick to get the `useFormState` hook to rethrow the error.
@@ -8555,7 +8577,7 @@ if (__DEV__) {
           reason: error // $FlowFixMe: Not sure why this doesn't work
         };
         setState(rejectedThenable);
-        finishRunningFormStateAction(actionQueue, setState);
+        finishRunningFormStateAction(actionQueue, setPendingState, setState);
       } finally {
         ReactCurrentBatchConfig$2.transition = prevTransition;
 
@@ -8577,7 +8599,11 @@ if (__DEV__) {
       }
     }
 
-    function finishRunningFormStateAction(actionQueue, setState) {
+    function finishRunningFormStateAction(
+      actionQueue,
+      setPendingState,
+      setState
+    ) {
       // The action finished running. Pop it from the queue and run the next pending
       // action, if there are any.
       var last = actionQueue.pending;
@@ -8593,7 +8619,12 @@ if (__DEV__) {
           var next = first.next;
           last.next = next; // Run the next action.
 
-          runFormStateAction(actionQueue, setState, next.payload);
+          runFormStateAction(
+            actionQueue,
+            setPendingState,
+            setState,
+            next.payload
+          );
         }
       }
     }
@@ -8623,7 +8654,16 @@ if (__DEV__) {
         currentlyRenderingFiber$1,
         stateQueue
       );
-      stateQueue.dispatch = setState; // Action queue hook. This is used to queue pending actions. The queue is
+      stateQueue.dispatch = setState; // Pending state. This is used to store the pending state of the action.
+      // Tracked optimistically, like a transition pending state.
+
+      var pendingStateHook = mountStateImpl(false);
+      var setPendingState = dispatchOptimisticSetState.bind(
+        null,
+        currentlyRenderingFiber$1,
+        false,
+        pendingStateHook.queue
+      ); // Action queue hook. This is used to queue pending actions. The queue is
       // shared between all instances of the hook. Similar to a regular state queue,
       // but different because the actions are run sequentially, and they run in
       // an event instead of during render.
@@ -8641,14 +8681,15 @@ if (__DEV__) {
         null,
         currentlyRenderingFiber$1,
         actionQueue,
+        setPendingState,
         setState
       );
       actionQueue.dispatch = dispatch; // Stash the action function on the memoized state of the hook. We'll use this
       // to detect when the action function changes so we can update it in
       // an effect.
 
       actionQueueHook.memoizedState = action;
-      return [initialState, dispatch];
+      return [initialState, dispatch, false];
     }
 
     function updateFormState(action, initialState, permalink) {
@@ -8669,7 +8710,10 @@ if (__DEV__) {
           currentStateHook,
           formStateReducer
         ),
-        actionResult = _updateReducerImpl[0]; // This will suspend until the action finishes.
+        actionResult = _updateReducerImpl[0];
+
+      var _updateState = updateState(),
+        isPending = _updateState[0]; // This will suspend until the action finishes.
 
       var state =
         typeof actionResult === "object" &&
@@ -8693,7 +8737,7 @@ if (__DEV__) {
         );
       }
 
-      return [state, dispatch];
+      return [state, dispatch, isPending];
     }
 
     function formStateActionEffect(actionQueue, action) {
@@ -8721,8 +8765,9 @@ if (__DEV__) {
       var actionQueue = actionQueueHook.queue;
       var dispatch = actionQueue.dispatch; // This may have changed during the rerender.
 
-      actionQueueHook.memoizedState = action;
-      return [state, dispatch];
+      actionQueueHook.memoizedState = action; // For mount, pending is always false.
+
+      return [state, dispatch, false];
     }
 
     function pushEffect(tag, create, inst, deps) {
@@ -9201,8 +9246,8 @@ if (__DEV__) {
     }
 
     function updateTransition() {
-      var _updateState = updateState(),
-        booleanOrThenable = _updateState[0];
+      var _updateState2 = updateState(),
+        booleanOrThenable = _updateState2[0];
 
       var hook = updateWorkInProgressHook();
       var start = hook.memoizedState;
@@ -25409,7 +25454,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "18.3.0-canary-3e6bc7d2d-20240312";
+    var ReactVersion = "18.3.0-canary-17eaacaac-20240312";
 
     // Might add PROFILE later.