useFormState: Compare action signatures when reusing form state (#27370)

During an MPA form submission, useFormState should only reuse the form
state if same action is passed both times. (We also compare the key
paths.)

We compare the identity of the inner closure function, disregarding the
value of the bound arguments. That way you can pass an inline Server
Action closure:

```js
function FormContainer({maxLength}) {
  function submitAction(prevState, formData) {
    'use server'
    if (formData.get('field').length > maxLength) {
      return { errorMsg: 'Too many characters' };
    }
    // ...
  }
  return <Form submitAction={submitAction} />
}
```

DiffTrain build for [95c9554bc7](https://github.com/facebook/react/commit/95c9554bc72813b0ee2b028774bb7cf0482887ba)

compiled/facebook-www/REVISION

@@ -1 +1 @@
-612b2b6601abb844248c384d1e288bb824b180b7
+95c9554bc72813b0ee2b028774bb7cf0482887ba

compiled/facebook-www/ReactDOMServer-dev.classic.js

@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-classic-71d6b3f3";
+var ReactVersion = "18.3.0-www-classic-62f810e0";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -9433,66 +9433,82 @@ function useFormState(action, initialState, permalink) {
   // this component, so we can generate a unique key for each one.
 
   var formStateHookIndex = formStateCounter++;
-  var request = currentlyRenderingRequest; // Append a node to the key path that represents the form state hook.
+  var request = currentlyRenderingRequest; // $FlowIgnore[prop-missing]
 
-  var componentKey = currentlyRenderingKeyPath;
-  var key = [componentKey, null, formStateHookIndex];
-  var keyJSON = JSON.stringify(key); // Get the form state. If we received form state from a previous page, then
-  // we should reuse that, if the action identity matches. Otherwise we'll use
-  // the initial state argument. We emit a comment marker into the stream
-  // that indicates whether the state was reused.
+  var formAction = action.$$FORM_ACTION;
 
-  var state;
-  var postbackFormState = getFormState(request);
+  if (typeof formAction === "function") {
+    // This is a server action. These have additional features to enable
+    // MPA-style form submissions with progressive enhancement.
+    // Determine the current form state. If we received state during an MPA form
+    // submission, then we will reuse that, if the action identity matches.
+    // Otherwise we'll use the initial state argument. We will emit a comment
+    // marker into the stream that indicates whether the state was reused.
+    var state = initialState; // Append a node to the key path that represents the form state hook.
 
-  if (postbackFormState !== null) {
-    var postbackKey = postbackFormState[1]; // TODO: Compare the action identity, too
-    // TODO: If a permalink is used, disregard the key and compare that instead.
+    var componentKey = currentlyRenderingKeyPath;
+    var key = [componentKey, null, formStateHookIndex];
+    var keyJSON = JSON.stringify(key);
+    var postbackFormState = getFormState(request); // $FlowIgnore[prop-missing]
 
-    if (keyJSON === postbackKey) {
-      // This was a match.
-      formStateMatchingIndex = formStateHookIndex; // Reuse the state that was submitted by the form.
+    var isSignatureEqual = action.$$IS_SIGNATURE_EQUAL;
 
-      state = postbackFormState[0];
-    } else {
-      state = initialState;
-    }
-  } else {
-    // TODO: As an optimization, Fizz should only emit these markers if form
-    // state is passed at the root.
-    state = initialState;
-  } // Bind the state to the first argument of the action.
+    if (postbackFormState !== null && typeof isSignatureEqual === "function") {
+      var postbackKeyJSON = postbackFormState[1];
+      var postbackReferenceId = postbackFormState[2];
+      var postbackBoundArity = postbackFormState[3];
 
-  var boundAction = action.bind(null, state); // Wrap the action so the return value is void.
+      if (
+        postbackKeyJSON === keyJSON &&
+        isSignatureEqual.call(action, postbackReferenceId, postbackBoundArity)
+      ) {
+        // This was a match
+        formStateMatchingIndex = formStateHookIndex; // Reuse the state that was submitted by the form.
 
-  var dispatch = function (payload) {
-    boundAction(payload);
-  }; // $FlowIgnore[prop-missing]
+        state = postbackFormState[0];
+      }
+    } // Bind the state to the first argument of the action.
 
-  if (typeof boundAction.$$FORM_ACTION === "function") {
-    // $FlowIgnore[prop-missing]
-    dispatch.$$FORM_ACTION = function (prefix) {
+    var boundAction = action.bind(null, state); // Wrap the action so the return value is void.
+
+    var dispatch = function (payload) {
+      boundAction(payload);
+    }; // $FlowIgnore[prop-missing]
+
+    if (typeof boundAction.$$FORM_ACTION === "function") {
       // $FlowIgnore[prop-missing]
-      var metadata = boundAction.$$FORM_ACTION(prefix);
-      var formData = metadata.data;
+      dispatch.$$FORM_ACTION = function (prefix) {
+        var metadata = boundAction.$$FORM_ACTION(prefix);
+        var formData = metadata.data;
 
-      if (formData) {
-        formData.append("$ACTION_KEY", keyJSON);
-      } // Override the action URL
+        if (formData) {
+          formData.append("$ACTION_KEY", keyJSON);
+        } // Override the action URL
 
-      if (permalink !== undefined) {
-        {
-          checkAttributeStringCoercion(permalink, "target");
+        if (permalink !== undefined) {
+          {
+            checkAttributeStringCoercion(permalink, "target");
+          }
+
+          metadata.action = permalink + "";
         }
 
-        metadata.action = permalink + "";
-      }
+        return metadata;
+      };
+    }
 
-      return metadata;
+    return [state, dispatch];
+  } else {
+    // This is not a server action, so the implementation is much simpler.
+    // Bind the state to the first argument of the action.
+    var _boundAction = action.bind(null, initialState); // Wrap the action so the return value is void.
+
+    var _dispatch2 = function (payload) {
+      _boundAction(payload);
     };
-  }
 
-  return [state, dispatch];
+    return [initialState, _dispatch2];
+  }
 }
 
 function useId() {

compiled/facebook-www/ReactDOMServer-dev.modern.js

@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-modern-5b6fb822";
+var ReactVersion = "18.3.0-www-modern-9f6e7af7";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -9192,66 +9192,82 @@ function useFormState(action, initialState, permalink) {
   // this component, so we can generate a unique key for each one.
 
   var formStateHookIndex = formStateCounter++;
-  var request = currentlyRenderingRequest; // Append a node to the key path that represents the form state hook.
+  var request = currentlyRenderingRequest; // $FlowIgnore[prop-missing]
 
-  var componentKey = currentlyRenderingKeyPath;
-  var key = [componentKey, null, formStateHookIndex];
-  var keyJSON = JSON.stringify(key); // Get the form state. If we received form state from a previous page, then
-  // we should reuse that, if the action identity matches. Otherwise we'll use
-  // the initial state argument. We emit a comment marker into the stream
-  // that indicates whether the state was reused.
+  var formAction = action.$$FORM_ACTION;
 
-  var state;
-  var postbackFormState = getFormState(request);
+  if (typeof formAction === "function") {
+    // This is a server action. These have additional features to enable
+    // MPA-style form submissions with progressive enhancement.
+    // Determine the current form state. If we received state during an MPA form
+    // submission, then we will reuse that, if the action identity matches.
+    // Otherwise we'll use the initial state argument. We will emit a comment
+    // marker into the stream that indicates whether the state was reused.
+    var state = initialState; // Append a node to the key path that represents the form state hook.
 
-  if (postbackFormState !== null) {
-    var postbackKey = postbackFormState[1]; // TODO: Compare the action identity, too
-    // TODO: If a permalink is used, disregard the key and compare that instead.
+    var componentKey = currentlyRenderingKeyPath;
+    var key = [componentKey, null, formStateHookIndex];
+    var keyJSON = JSON.stringify(key);
+    var postbackFormState = getFormState(request); // $FlowIgnore[prop-missing]
 
-    if (keyJSON === postbackKey) {
-      // This was a match.
-      formStateMatchingIndex = formStateHookIndex; // Reuse the state that was submitted by the form.
+    var isSignatureEqual = action.$$IS_SIGNATURE_EQUAL;
 
-      state = postbackFormState[0];
-    } else {
-      state = initialState;
-    }
-  } else {
-    // TODO: As an optimization, Fizz should only emit these markers if form
-    // state is passed at the root.
-    state = initialState;
-  } // Bind the state to the first argument of the action.
+    if (postbackFormState !== null && typeof isSignatureEqual === "function") {
+      var postbackKeyJSON = postbackFormState[1];
+      var postbackReferenceId = postbackFormState[2];
+      var postbackBoundArity = postbackFormState[3];
 
-  var boundAction = action.bind(null, state); // Wrap the action so the return value is void.
+      if (
+        postbackKeyJSON === keyJSON &&
+        isSignatureEqual.call(action, postbackReferenceId, postbackBoundArity)
+      ) {
+        // This was a match
+        formStateMatchingIndex = formStateHookIndex; // Reuse the state that was submitted by the form.
 
-  var dispatch = function (payload) {
-    boundAction(payload);
-  }; // $FlowIgnore[prop-missing]
+        state = postbackFormState[0];
+      }
+    } // Bind the state to the first argument of the action.
 
-  if (typeof boundAction.$$FORM_ACTION === "function") {
-    // $FlowIgnore[prop-missing]
-    dispatch.$$FORM_ACTION = function (prefix) {
+    var boundAction = action.bind(null, state); // Wrap the action so the return value is void.
+
+    var dispatch = function (payload) {
+      boundAction(payload);
+    }; // $FlowIgnore[prop-missing]
+
+    if (typeof boundAction.$$FORM_ACTION === "function") {
       // $FlowIgnore[prop-missing]
-      var metadata = boundAction.$$FORM_ACTION(prefix);
-      var formData = metadata.data;
+      dispatch.$$FORM_ACTION = function (prefix) {
+        var metadata = boundAction.$$FORM_ACTION(prefix);
+        var formData = metadata.data;
 
-      if (formData) {
-        formData.append("$ACTION_KEY", keyJSON);
-      } // Override the action URL
+        if (formData) {
+          formData.append("$ACTION_KEY", keyJSON);
+        } // Override the action URL
 
-      if (permalink !== undefined) {
-        {
-          checkAttributeStringCoercion(permalink, "target");
+        if (permalink !== undefined) {
+          {
+            checkAttributeStringCoercion(permalink, "target");
+          }
+
+          metadata.action = permalink + "";
         }
 
-        metadata.action = permalink + "";
-      }
+        return metadata;
+      };
+    }
 
-      return metadata;
+    return [state, dispatch];
+  } else {
+    // This is not a server action, so the implementation is much simpler.
+    // Bind the state to the first argument of the action.
+    var _boundAction = action.bind(null, initialState); // Wrap the action so the return value is void.
+
+    var _dispatch2 = function (payload) {
+      _boundAction(payload);
     };
-  }
 
-  return [state, dispatch];
+    return [initialState, _dispatch2];
+  }
 }
 
 function useId() {

compiled/facebook-www/ReactDOMServer-prod.classic.js

@@ -2738,32 +2738,50 @@ function useOptimistic(passthrough) {
   return [passthrough, unsupportedSetOptimisticState];
 }
 function useFormState(action, initialState, permalink) {
-  function dispatch(payload) {
-    boundAction(payload);
-  }
   resolveCurrentlyRenderingComponent();
   var formStateHookIndex = formStateCounter++,
-    request = currentlyRenderingRequest,
-    keyJSON = JSON.stringify([
+    request = currentlyRenderingRequest;
+  if ("function" === typeof action.$$FORM_ACTION) {
+    var keyJSON = JSON.stringify([
       currentlyRenderingKeyPath,
       null,
       formStateHookIndex
     ]);
-  request = request.formState;
-  null !== request &&
-    keyJSON === request[1] &&
-    ((formStateMatchingIndex = formStateHookIndex),
-    (initialState = request[0]));
-  var boundAction = action.bind(null, initialState);
-  "function" === typeof boundAction.$$FORM_ACTION &&
-    (dispatch.$$FORM_ACTION = function (prefix) {
-      prefix = boundAction.$$FORM_ACTION(prefix);
-      var formData = prefix.data;
-      formData && formData.append("$ACTION_KEY", keyJSON);
-      void 0 !== permalink && (prefix.action = permalink + "");
-      return prefix;
-    });
-  return [initialState, dispatch];
+    request = request.formState;
+    var isSignatureEqual = action.$$IS_SIGNATURE_EQUAL;
+    if (null !== request && "function" === typeof isSignatureEqual) {
+      var postbackReferenceId = request[2],
+        postbackBoundArity = request[3];
+      request[1] === keyJSON &&
+        isSignatureEqual.call(
+          action,
+          postbackReferenceId,
+          postbackBoundArity
+        ) &&
+        ((formStateMatchingIndex = formStateHookIndex),
+        (initialState = request[0]));
+    }
+    var boundAction = action.bind(null, initialState);
+    action = function (payload) {
+      boundAction(payload);
+    };
+    "function" === typeof boundAction.$$FORM_ACTION &&
+      (action.$$FORM_ACTION = function (prefix) {
+        prefix = boundAction.$$FORM_ACTION(prefix);
+        var formData = prefix.data;
+        formData && formData.append("$ACTION_KEY", keyJSON);
+        void 0 !== permalink && (prefix.action = permalink + "");
+        return prefix;
+      });
+    return [initialState, action];
+  }
+  var boundAction$10 = action.bind(null, initialState);
+  return [
+    initialState,
+    function (payload) {
+      boundAction$10(payload);
+    }
+  ];
 }
 function unwrapThenable(thenable) {
   var index = thenableIndexCounter;
@@ -4351,13 +4369,13 @@ function flushCompletedQueues(request, destination) {
     completedBoundaries.splice(0, i);
     var partialBoundaries = request.partialBoundaries;
     for (i = 0; i < partialBoundaries.length; i++) {
-      var boundary$15 = partialBoundaries[i];
+      var boundary$17 = partialBoundaries[i];
       a: {
         clientRenderedBoundaries = request;
         boundary = destination;
         clientRenderedBoundaries.renderState.boundaryResources =
-          boundary$15.resources;
-        var completedSegments = boundary$15.completedSegments;
+          boundary$17.resources;
+        var completedSegments = boundary$17.completedSegments;
         for (
           resumableState$jscomp$1 = 0;
           resumableState$jscomp$1 < completedSegments.length;
@@ -4367,7 +4385,7 @@ function flushCompletedQueues(request, destination) {
             !flushPartiallyCompletedSegment(
               clientRenderedBoundaries,
               boundary,
-              boundary$15,
+              boundary$17,
               completedSegments[resumableState$jscomp$1]
             )
           ) {
@@ -4379,7 +4397,7 @@ function flushCompletedQueues(request, destination) {
         completedSegments.splice(0, resumableState$jscomp$1);
         JSCompiler_inline_result = writeResourcesForBoundary(
           boundary,
-          boundary$15.resources,
+          boundary$17.resources,
           clientRenderedBoundaries.renderState
         );
       }
@@ -4442,8 +4460,8 @@ function abort(request, reason) {
     }
     null !== request.destination &&
       flushCompletedQueues(request, request.destination);
-  } catch (error$17) {
-    logRecoverableError(request, error$17), fatalError(request, error$17);
+  } catch (error$19) {
+    logRecoverableError(request, error$19), fatalError(request, error$19);
   }
 }
 function onError() {}
@@ -4530,4 +4548,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-classic-53a2640c";
+exports.version = "18.3.0-www-classic-aa5cc76a";

compiled/facebook-www/ReactDOMServer-prod.modern.js

@@ -2730,32 +2730,50 @@ function useOptimistic(passthrough) {
   return [passthrough, unsupportedSetOptimisticState];
 }
 function useFormState(action, initialState, permalink) {
-  function dispatch(payload) {
-    boundAction(payload);
-  }
   resolveCurrentlyRenderingComponent();
   var formStateHookIndex = formStateCounter++,
-    request = currentlyRenderingRequest,
-    keyJSON = JSON.stringify([
+    request = currentlyRenderingRequest;
+  if ("function" === typeof action.$$FORM_ACTION) {
+    var keyJSON = JSON.stringify([
       currentlyRenderingKeyPath,
       null,
       formStateHookIndex
     ]);
-  request = request.formState;
-  null !== request &&
-    keyJSON === request[1] &&
-    ((formStateMatchingIndex = formStateHookIndex),
-    (initialState = request[0]));
-  var boundAction = action.bind(null, initialState);
-  "function" === typeof boundAction.$$FORM_ACTION &&
-    (dispatch.$$FORM_ACTION = function (prefix) {
-      prefix = boundAction.$$FORM_ACTION(prefix);
-      var formData = prefix.data;
-      formData && formData.append("$ACTION_KEY", keyJSON);
-      void 0 !== permalink && (prefix.action = permalink + "");
-      return prefix;
-    });
-  return [initialState, dispatch];
+    request = request.formState;
+    var isSignatureEqual = action.$$IS_SIGNATURE_EQUAL;
+    if (null !== request && "function" === typeof isSignatureEqual) {
+      var postbackReferenceId = request[2],
+        postbackBoundArity = request[3];
+      request[1] === keyJSON &&
+        isSignatureEqual.call(
+          action,
+          postbackReferenceId,
+          postbackBoundArity
+        ) &&
+        ((formStateMatchingIndex = formStateHookIndex),
+        (initialState = request[0]));
+    }
+    var boundAction = action.bind(null, initialState);
+    action = function (payload) {
+      boundAction(payload);
+    };
+    "function" === typeof boundAction.$$FORM_ACTION &&
+      (action.$$FORM_ACTION = function (prefix) {
+        prefix = boundAction.$$FORM_ACTION(prefix);
+        var formData = prefix.data;
+        formData && formData.append("$ACTION_KEY", keyJSON);
+        void 0 !== permalink && (prefix.action = permalink + "");
+        return prefix;
+      });
+    return [initialState, action];
+  }
+  var boundAction$10 = action.bind(null, initialState);
+  return [
+    initialState,
+    function (payload) {
+      boundAction$10(payload);
+    }
+  ];
 }
 function unwrapThenable(thenable) {
   var index = thenableIndexCounter;
@@ -4318,13 +4336,13 @@ function flushCompletedQueues(request, destination) {
     completedBoundaries.splice(0, i);
     var partialBoundaries = request.partialBoundaries;
     for (i = 0; i < partialBoundaries.length; i++) {
-      var boundary$15 = partialBoundaries[i];
+      var boundary$17 = partialBoundaries[i];
       a: {
         clientRenderedBoundaries = request;
         boundary = destination;
         clientRenderedBoundaries.renderState.boundaryResources =
-          boundary$15.resources;
-        var completedSegments = boundary$15.completedSegments;
+          boundary$17.resources;
+        var completedSegments = boundary$17.completedSegments;
         for (
           resumableState$jscomp$1 = 0;
           resumableState$jscomp$1 < completedSegments.length;
@@ -4334,7 +4352,7 @@ function flushCompletedQueues(request, destination) {
             !flushPartiallyCompletedSegment(
               clientRenderedBoundaries,
               boundary,
-              boundary$15,
+              boundary$17,
               completedSegments[resumableState$jscomp$1]
             )
           ) {
@@ -4346,7 +4364,7 @@ function flushCompletedQueues(request, destination) {
         completedSegments.splice(0, resumableState$jscomp$1);
         JSCompiler_inline_result = writeResourcesForBoundary(
           boundary,
-          boundary$15.resources,
+          boundary$17.resources,
           clientRenderedBoundaries.renderState
         );
       }
@@ -4409,8 +4427,8 @@ function abort(request, reason) {
     }
     null !== request.destination &&
       flushCompletedQueues(request, request.destination);
-  } catch (error$17) {
-    logRecoverableError(request, error$17), fatalError(request, error$17);
+  } catch (error$19) {
+    logRecoverableError(request, error$19), fatalError(request, error$19);
   }
 }
 function onError() {}
@@ -4497,4 +4515,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-modern-49e9de7a";
+exports.version = "18.3.0-www-modern-ffdd98cf";

compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js

@@ -9098,66 +9098,82 @@ function useFormState(action, initialState, permalink) {
   // this component, so we can generate a unique key for each one.
 
   var formStateHookIndex = formStateCounter++;
-  var request = currentlyRenderingRequest; // Append a node to the key path that represents the form state hook.
+  var request = currentlyRenderingRequest; // $FlowIgnore[prop-missing]
 
-  var componentKey = currentlyRenderingKeyPath;
-  var key = [componentKey, null, formStateHookIndex];
-  var keyJSON = JSON.stringify(key); // Get the form state. If we received form state from a previous page, then
-  // we should reuse that, if the action identity matches. Otherwise we'll use
-  // the initial state argument. We emit a comment marker into the stream
-  // that indicates whether the state was reused.
+  var formAction = action.$$FORM_ACTION;
 
-  var state;
-  var postbackFormState = getFormState(request);
+  if (typeof formAction === "function") {
+    // This is a server action. These have additional features to enable
+    // MPA-style form submissions with progressive enhancement.
+    // Determine the current form state. If we received state during an MPA form
+    // submission, then we will reuse that, if the action identity matches.
+    // Otherwise we'll use the initial state argument. We will emit a comment
+    // marker into the stream that indicates whether the state was reused.
+    var state = initialState; // Append a node to the key path that represents the form state hook.
 
-  if (postbackFormState !== null) {
-    var postbackKey = postbackFormState[1]; // TODO: Compare the action identity, too
-    // TODO: If a permalink is used, disregard the key and compare that instead.
+    var componentKey = currentlyRenderingKeyPath;
+    var key = [componentKey, null, formStateHookIndex];
+    var keyJSON = JSON.stringify(key);
+    var postbackFormState = getFormState(request); // $FlowIgnore[prop-missing]
 
-    if (keyJSON === postbackKey) {
-      // This was a match.
-      formStateMatchingIndex = formStateHookIndex; // Reuse the state that was submitted by the form.
+    var isSignatureEqual = action.$$IS_SIGNATURE_EQUAL;
 
-      state = postbackFormState[0];
-    } else {
-      state = initialState;
-    }
-  } else {
-    // TODO: As an optimization, Fizz should only emit these markers if form
-    // state is passed at the root.
-    state = initialState;
-  } // Bind the state to the first argument of the action.
+    if (postbackFormState !== null && typeof isSignatureEqual === "function") {
+      var postbackKeyJSON = postbackFormState[1];
+      var postbackReferenceId = postbackFormState[2];
+      var postbackBoundArity = postbackFormState[3];
 
-  var boundAction = action.bind(null, state); // Wrap the action so the return value is void.
+      if (
+        postbackKeyJSON === keyJSON &&
+        isSignatureEqual.call(action, postbackReferenceId, postbackBoundArity)
+      ) {
+        // This was a match
+        formStateMatchingIndex = formStateHookIndex; // Reuse the state that was submitted by the form.
 
-  var dispatch = function (payload) {
-    boundAction(payload);
-  }; // $FlowIgnore[prop-missing]
+        state = postbackFormState[0];
+      }
+    } // Bind the state to the first argument of the action.
 
-  if (typeof boundAction.$$FORM_ACTION === "function") {
-    // $FlowIgnore[prop-missing]
-    dispatch.$$FORM_ACTION = function (prefix) {
+    var boundAction = action.bind(null, state); // Wrap the action so the return value is void.
+
+    var dispatch = function (payload) {
+      boundAction(payload);
+    }; // $FlowIgnore[prop-missing]
+
+    if (typeof boundAction.$$FORM_ACTION === "function") {
       // $FlowIgnore[prop-missing]
-      var metadata = boundAction.$$FORM_ACTION(prefix);
-      var formData = metadata.data;
+      dispatch.$$FORM_ACTION = function (prefix) {
+        var metadata = boundAction.$$FORM_ACTION(prefix);
+        var formData = metadata.data;
 
-      if (formData) {
-        formData.append("$ACTION_KEY", keyJSON);
-      } // Override the action URL
+        if (formData) {
+          formData.append("$ACTION_KEY", keyJSON);
+        } // Override the action URL
 
-      if (permalink !== undefined) {
-        {
-          checkAttributeStringCoercion(permalink, "target");
+        if (permalink !== undefined) {
+          {
+            checkAttributeStringCoercion(permalink, "target");
+          }
+
+          metadata.action = permalink + "";
         }
 
-        metadata.action = permalink + "";
-      }
+        return metadata;
+      };
+    }
 
-      return metadata;
+    return [state, dispatch];
+  } else {
+    // This is not a server action, so the implementation is much simpler.
+    // Bind the state to the first argument of the action.
+    var _boundAction = action.bind(null, initialState); // Wrap the action so the return value is void.
+
+    var _dispatch2 = function (payload) {
+      _boundAction(payload);
     };
-  }
 
-  return [state, dispatch];
+    return [initialState, _dispatch2];
+  }
 }
 
 function useId() {

compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js

@@ -2586,32 +2586,50 @@ function useOptimistic(passthrough) {
   return [passthrough, unsupportedSetOptimisticState];
 }
 function useFormState(action, initialState, permalink) {
-  function dispatch(payload) {
-    boundAction(payload);
-  }
   resolveCurrentlyRenderingComponent();
   var formStateHookIndex = formStateCounter++,
-    request = currentlyRenderingRequest,
-    keyJSON = JSON.stringify([
+    request = currentlyRenderingRequest;
+  if ("function" === typeof action.$$FORM_ACTION) {
+    var keyJSON = JSON.stringify([
       currentlyRenderingKeyPath,
       null,
       formStateHookIndex
     ]);
-  request = request.formState;
-  null !== request &&
-    keyJSON === request[1] &&
-    ((formStateMatchingIndex = formStateHookIndex),
-    (initialState = request[0]));
-  var boundAction = action.bind(null, initialState);
-  "function" === typeof boundAction.$$FORM_ACTION &&
-    (dispatch.$$FORM_ACTION = function (prefix) {
-      prefix = boundAction.$$FORM_ACTION(prefix);
-      var formData = prefix.data;
-      formData && formData.append("$ACTION_KEY", keyJSON);
-      void 0 !== permalink && (prefix.action = permalink + "");
-      return prefix;
-    });
-  return [initialState, dispatch];
+    request = request.formState;
+    var isSignatureEqual = action.$$IS_SIGNATURE_EQUAL;
+    if (null !== request && "function" === typeof isSignatureEqual) {
+      var postbackReferenceId = request[2],
+        postbackBoundArity = request[3];
+      request[1] === keyJSON &&
+        isSignatureEqual.call(
+          action,
+          postbackReferenceId,
+          postbackBoundArity
+        ) &&
+        ((formStateMatchingIndex = formStateHookIndex),
+        (initialState = request[0]));
+    }
+    var boundAction = action.bind(null, initialState);
+    action = function (payload) {
+      boundAction(payload);
+    };
+    "function" === typeof boundAction.$$FORM_ACTION &&
+      (action.$$FORM_ACTION = function (prefix) {
+        prefix = boundAction.$$FORM_ACTION(prefix);
+        var formData = prefix.data;
+        formData && formData.append("$ACTION_KEY", keyJSON);
+        void 0 !== permalink && (prefix.action = permalink + "");
+        return prefix;
+      });
+    return [initialState, action];
+  }
+  var boundAction$10 = action.bind(null, initialState);
+  return [
+    initialState,
+    function (payload) {
+      boundAction$10(payload);
+    }
+  ];
 }
 function unwrapThenable(thenable) {
   var index = thenableIndexCounter;
@@ -4015,13 +4033,13 @@ function flushCompletedQueues(request, destination) {
     completedBoundaries.splice(0, i);
     var partialBoundaries = request.partialBoundaries;
     for (i = 0; i < partialBoundaries.length; i++) {
-      var boundary$15 = partialBoundaries[i];
+      var boundary$17 = partialBoundaries[i];
       a: {
         clientRenderedBoundaries = request;
         boundary = destination;
         clientRenderedBoundaries.renderState.boundaryResources =
-          boundary$15.resources;
-        var completedSegments = boundary$15.completedSegments;
+          boundary$17.resources;
+        var completedSegments = boundary$17.completedSegments;
         for (
           resumableState$jscomp$1 = 0;
           resumableState$jscomp$1 < completedSegments.length;
@@ -4031,7 +4049,7 @@ function flushCompletedQueues(request, destination) {
             !flushPartiallyCompletedSegment(
               clientRenderedBoundaries,
               boundary,
-              boundary$15,
+              boundary$17,
               completedSegments[resumableState$jscomp$1]
             )
           ) {
@@ -4043,7 +4061,7 @@ function flushCompletedQueues(request, destination) {
         completedSegments.splice(0, resumableState$jscomp$1);
         JSCompiler_inline_result = writeResourcesForBoundary(
           boundary,
-          boundary$15.resources,
+          boundary$17.resources,
           clientRenderedBoundaries.renderState
         );
       }
@@ -4103,8 +4121,8 @@ function abort(request, reason) {
     }
     null !== request.destination &&
       flushCompletedQueues(request, request.destination);
-  } catch (error$17) {
-    logRecoverableError(request, error$17), fatalError(request, error$17);
+  } catch (error$19) {
+    logRecoverableError(request, error$19), fatalError(request, error$19);
   }
 }
 exports.abortStream = function (stream) {

compiled/facebook-www/ReactTestRenderer-dev.modern.js

@@ -24360,7 +24360,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-4234bfd2";
+var ReactVersion = "18.3.0-www-modern-1f53bcad";
 
 // Might add PROFILE later.