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.

Author: acdlite

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> = {

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.