From d6dcad6a8beaeec0513a9851d1e0fe1181932360 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 14 Sep 2023 11:46:16 -0400
Subject: [PATCH] useFormState: Only emit markers if postback state is provided
 (#27374)

This is an optimization where useFormState will only emit extra comment
markers if a form state is passed at the root. If no state is passed, we
don't need to emit anything because none of the hooks will match.
---
 packages/react-reconciler/src/ReactFiberHooks.js | 15 ++++++++++-----
 packages/react-server/src/ReactFizzServer.js     |  7 +++----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
index 1f8438b035edd..97f50d65f46c8 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -2015,13 +2015,18 @@ function mountFormState<S, P>(
 ): [S, (P) => void] {
   let initialState = initialStateProp;
   if (getIsHydrating()) {
-    const isMatching = tryToClaimNextHydratableFormMarkerInstance(
-      currentlyRenderingFiber,
-    );
     const root: FiberRoot = (getWorkInProgressRoot(): any);
     const ssrFormState = root.formState;
-    if (ssrFormState !== null && isMatching) {
-      initialState = ssrFormState[0];
+    // If a formState option was passed to the root, there are form state
+    // markers that we need to hydrate. These indicate whether the form state
+    // matches this hook instance.
+    if (ssrFormState !== null) {
+      const isMatching = tryToClaimNextHydratableFormMarkerInstance(
+        currentlyRenderingFiber,
+      );
+      if (isMatching) {
+        initialState = ssrFormState[0];
+      }
     }
   }
   const initialStateThenable: Thenable<S> = {
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 64ecfd1d84e93..15e05ddf34f8c 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -1193,11 +1193,10 @@ function finishFunctionComponent(
   formStateMatchingIndex: number,
 ) {
   let didEmitFormStateMarkers = false;
-  if (formStateCount !== 0) {
+  if (formStateCount !== 0 && request.formState !== null) {
     // For each useFormState hook, emit a marker that indicates whether we
-    // rendered using the form state passed at the root.
-    // TODO: As an optimization, Fizz should only emit these markers if form
-    // state is passed at the root.
+    // rendered using the form state passed at the root. We only emit these
+    // markers if form state is passed at the root.
     const segment = task.blockedSegment;
     if (segment === null) {
       // Implies we're in reumable mode.