Compute props diff in the begin phase

Otherwise we won't have diffs of parent props when a child later throws.
facebook · Mar 7, 2024 · f3704ea · f3704ea
1 parent e14532f
commit f3704ea
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 19 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -227,7 +227,11 @@ function warnNonHydratedInstance(
   }
 }
 
-function tryHydrateInstance(fiber: Fiber, nextInstance: any) {
+function tryHydrateInstance(
+  fiber: Fiber,
+  nextInstance: any,
+  hostContext: HostContext,
+) {
   // fiber is a HostComponent Fiber
   const instance = canHydrateInstance(
     nextInstance,
@@ -237,6 +241,22 @@ function tryHydrateInstance(fiber: Fiber, nextInstance: any) {
   );
   if (instance !== null) {
     fiber.stateNode = (instance: Instance);
+
+    if (__DEV__) {
+      if (!didSuspendOrErrorDEV) {
+        const differences = diffHydratedPropsForDevWarnings(
+          instance,
+          fiber.type,
+          fiber.pendingProps,
+          hostContext,
+        );
+        if (differences !== null) {
+          const diffNode = buildHydrationDiffNode(fiber, 0);
+          diffNode.serverProps = differences;
+        }
+      }
+    }
+
     hydrationParentFiber = fiber;
     nextHydratableInstance = getFirstHydratableChild(instance);
     rootOrSingletonContext = false;
@@ -334,6 +354,22 @@ function claimHydratableSingleton(fiber: Fiber): void {
       currentHostContext,
       false,
     ));
+
+    if (__DEV__) {
+      if (!didSuspendOrErrorDEV) {
+        const differences = diffHydratedPropsForDevWarnings(
+          instance,
+          fiber.type,
+          fiber.pendingProps,
+          currentHostContext,
+        );
+        if (differences !== null) {
+          const diffNode = buildHydrationDiffNode(fiber, 0);
+          diffNode.serverProps = differences;
+        }
+      }
+    }
+
     hydrationParentFiber = fiber;
     rootOrSingletonContext = true;
     nextHydratableInstance = getFirstHydratableChild(instance);
@@ -354,7 +390,10 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   );
 
   const nextInstance = nextHydratableInstance;
-  if (!nextInstance || !tryHydrateInstance(fiber, nextInstance)) {
+  if (
+    !nextInstance ||
+    !tryHydrateInstance(fiber, nextInstance, currentHostContext)
+  ) {
     if (shouldKeepWarning) {
       warnNonHydratedInstance(fiber, nextInstance);
     }
@@ -433,22 +472,6 @@ function prepareToHydrateHostInstance(
   }
 
   const instance: Instance = fiber.stateNode;
-  if (__DEV__) {
-    const shouldWarnIfMismatchDev = !didSuspendOrErrorDEV;
-    if (shouldWarnIfMismatchDev) {
-      const differences = diffHydratedPropsForDevWarnings(
-        instance,
-        fiber.type,
-        fiber.memoizedProps,
-        hostContext,
-      );
-      if (differences !== null) {
-        const diffNode = buildHydrationDiffNode(fiber, 0);
-        diffNode.serverProps = differences;
-      }
-    }
-  }
-
   const didHydrate = hydrateInstance(
     instance,
     fiber.type,

diff --git a/packages/react-reconciler/src/ReactFiberHydrationDiffs.js b/packages/react-reconciler/src/ReactFiberHydrationDiffs.js
@@ -279,7 +279,6 @@ function describeCollapsedElement(
     content += ' ' + propName + '=' + propValue;
   }
 
-  // No properties
   return indentation(indent) + '<' + type + content + '>\n';
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -279,7 +279,6 @@ function describeCollapsedElement( @@
         content += ' ' + propName + '=' + propValue;
       }
-      // No properties
       return indentation(indent) + '<' + type + content + '>\n';
     }
@@ Expand Down @@