From 3ae3605b51739833e5a87e6ab9d2d080f38916eb Mon Sep 17 00:00:00 2001
From: Marco Salazar <salazarm@fb.com>
Date: Tue, 1 Feb 2022 10:26:55 -0500
Subject: [PATCH] warn in a loop

---
 .../src/ReactFiberHydrationContext.new.js     | 29 ++++++++++++-------
 .../src/ReactFiberHydrationContext.old.js     | 29 ++++++++++++-------
 2 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 2a747570d4ffc..b6153eddccebb 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -339,12 +339,16 @@ function tryHydrate(fiber, nextInstance) {
   }
 }
 
-function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
-  if (
+function shouldClientRenderOnMismatch(fiber: Fiber) {
+  return (
     enableClientRenderFallbackOnHydrationMismatch &&
     (fiber.mode & ConcurrentMode) !== NoMode &&
     (fiber.flags & DidCapture) === NoFlags
-  ) {
+  );
+}
+
+function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
+  if (shouldClientRenderOnMismatch(fiber)) {
     throw new Error(
       'An error occurred during hydration. The server HTML was replaced with client content',
     );
@@ -553,11 +557,14 @@ function popHydrationState(fiber: Fiber): boolean {
   ) {
     let nextInstance = nextHydratableInstance;
     if (nextInstance) {
-      warnIfUnhydratedTailNodes(fiber);
-      throwOnHydrationMismatchIfConcurrentMode(fiber);
-      while (nextInstance) {
-        deleteHydratableInstance(fiber, nextInstance);
-        nextInstance = getNextHydratableSibling(nextInstance);
+      if (shouldClientRenderOnMismatch(fiber)) {
+        warnIfUnhydratedTailNodes(fiber);
+        throwOnHydrationMismatchIfConcurrentMode(fiber);
+      } else {
+        while (nextInstance) {
+          deleteHydratableInstance(fiber, nextInstance);
+          nextInstance = getNextHydratableSibling(nextInstance);
+        }
       }
     }
   }
@@ -577,8 +584,10 @@ function hasUnhydratedTailNodes() {
 }
 
 function warnIfUnhydratedTailNodes(fiber: Fiber) {
-  if (nextHydratableInstance) {
-    warnUnhydratedInstance(fiber, nextHydratableInstance);
+  let nextInstance = nextHydratableInstance;
+  while (nextInstance) {
+    warnUnhydratedInstance(fiber, nextInstance);
+    nextInstance = getNextHydratableSibling(nextInstance);
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index fd538012d57f9..9e2518542454a 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -339,12 +339,16 @@ function tryHydrate(fiber, nextInstance) {
   }
 }
 
-function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
-  if (
+function shouldClientRenderOnMismatch(fiber: Fiber) {
+  return (
     enableClientRenderFallbackOnHydrationMismatch &&
     (fiber.mode & ConcurrentMode) !== NoMode &&
     (fiber.flags & DidCapture) === NoFlags
-  ) {
+  );
+}
+
+function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
+  if (shouldClientRenderOnMismatch(fiber)) {
     throw new Error(
       'An error occurred during hydration. The server HTML was replaced with client content',
     );
@@ -553,11 +557,14 @@ function popHydrationState(fiber: Fiber): boolean {
   ) {
     let nextInstance = nextHydratableInstance;
     if (nextInstance) {
-      warnIfUnhydratedTailNodes(fiber);
-      throwOnHydrationMismatchIfConcurrentMode(fiber);
-      while (nextInstance) {
-        deleteHydratableInstance(fiber, nextInstance);
-        nextInstance = getNextHydratableSibling(nextInstance);
+      if (shouldClientRenderOnMismatch(fiber)) {
+        warnIfUnhydratedTailNodes(fiber);
+        throwOnHydrationMismatchIfConcurrentMode(fiber);
+      } else {
+        while (nextInstance) {
+          deleteHydratableInstance(fiber, nextInstance);
+          nextInstance = getNextHydratableSibling(nextInstance);
+        }
       }
     }
   }
@@ -577,8 +584,10 @@ function hasUnhydratedTailNodes() {
 }
 
 function warnIfUnhydratedTailNodes(fiber: Fiber) {
-  if (nextHydratableInstance) {
-    warnUnhydratedInstance(fiber, nextHydratableInstance);
+  let nextInstance = nextHydratableInstance;
+  while (nextInstance) {
+    warnUnhydratedInstance(fiber, nextInstance);
+    nextInstance = getNextHydratableSibling(nextInstance);
   }
 }