From dee287d16d0c2d95606980011c64101d24a39519 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 1 Apr 2022 20:51:09 +0100
Subject: [PATCH 1/5] [WIP] Diffs for hydration errors

---
 .../__tests__/ReactDOMHydrationDiff-test.js   | 659 +++++++++++-------
 .../react-dom/src/client/ReactDOMComponent.js | 117 +++-
 2 files changed, 499 insertions(+), 277 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index 9237493c6dcec..09edd2caf3234 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -83,28 +83,17 @@ describe('ReactDOMServerHydration', () => {
           </div>
         );
       }
-      if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          Array [
-            "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
-              in main (at **)
-              in div (at **)
-              in Mismatch (at **)",
-            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-            "Caught [Text content does not match server-rendered HTML.]",
-            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-          ]
-        `);
-      } else {
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          Array [
-            "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
-              in main (at **)
-              in div (at **)
-              in Mismatch (at **)",
-          ]
-        `);
-      }
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        Array [
+          "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
+            in main (at **)
+            in div (at **)
+            in Mismatch (at **)",
+          "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+          "Caught [Text content does not match server-rendered HTML.]",
+          "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+        ]
+      `);
     });
 
     // @gate __DEV__
@@ -263,16 +252,16 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <main> in <div>.
-                in main (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching <main> in <div>.
+              in main (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -287,16 +276,16 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <header> in <div>.
-                in header (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching <header> in <div>.
+              in header (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -311,16 +300,16 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <main> in <div>.
-                in main (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching <main> in <div>.
+              in main (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -335,16 +324,39 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <footer> in <div>.
-                in footer (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching <footer> in <div>.
+              in footer (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when client renders an extra element after a text node', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              one
+              {isClient && <footer className="2" />}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Warning: Expected server HTML to contain a matching <footer> in <div>.
+              in footer (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
     });
 
@@ -354,26 +366,16 @@ describe('ReactDOMServerHydration', () => {
         function Mismatch({isClient}) {
           return <div className="parent">{isClient && 'only'}</div>;
         }
-        if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Text content does not match server-rendered HTML.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Text content does not match server-rendered HTML.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -388,15 +390,15 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching text node for \\"second\\" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching text node for \\"second\\" in <div>.
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -411,15 +413,15 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching text node for \\"first\\" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching text node for \\"first\\" in <div>.
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -444,6 +446,28 @@ describe('ReactDOMServerHydration', () => {
             ]
           `);
       });
+
+      // @gate __DEV__
+      it('warns when client renders an extra text node after an element', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <header className="1" />
+              {isClient && 'two'}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Warning: Expected server HTML to contain a matching text node for \\"two\\" in <div>.
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
+      });
     });
   });
 
@@ -459,15 +483,19 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <main> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: The content rendered by the server and the client did not match because the server has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+          -   <main class=\\"only\\" /> <-- server
+            </div>
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -482,17 +510,17 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <main> in <div>.
-                in main (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching <main> in <div>.
+              in main (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -507,16 +535,16 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <footer> in <div>.
-                in footer (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching <footer> in <div>.
+              in footer (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -531,15 +559,48 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <footer> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: The content rendered by the server and the client did not match because the server has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+              ...
+              <main class=\\"2\\" />
+          -   <footer class=\\"3\\" /> <-- server
+            </div>
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra element after a text node', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              one
+              {!isClient && <footer className="2" />}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Warning: The content rendered by the server and the client did not match because the server has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+              one
+          -   <footer class=\\"2\\" /> <-- server
+            </div>
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
     });
 
@@ -550,15 +611,19 @@ describe('ReactDOMServerHydration', () => {
           return <div className="parent">{!isClient && 'only'}</div>;
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain the text node \\"only\\" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: The content rendered by the server and the client did not match because the server has rendered an extra text node. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+          -   only <-- server
+            </div>
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -573,17 +638,17 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <main> in <div>.
-                in main (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching <main> in <div>.
+              in main (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -598,16 +663,16 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <footer> in <div>.
-                in footer (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching <footer> in <div>.
+              in footer (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -622,15 +687,48 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain the text node \\"third\\" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: The content rendered by the server and the client did not match because the server has rendered an extra text node. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+              ...
+              <main class=\\"2\\" />
+          -   third <-- server
+            </div>
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
+      });
+
+      // @gate __DEV__
+      it('warns when server renders an extra text node after an element', () => {
+        function Mismatch({isClient}) {
+          return (
+            <div className="parent">
+              <header className="1" />
+              {!isClient && 'two'}
+            </div>
+          );
+        }
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Warning: The content rendered by the server and the client did not match because the server has rendered an extra text node. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+              <header class=\\"1\\" />
+          -   two <-- server
+            </div>
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
     });
   });
@@ -656,12 +754,12 @@ describe('ReactDOMServerHydration', () => {
         }
         // TODO: This message doesn't seem to have any useful details.
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -678,15 +776,19 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <main> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: The content rendered by the server and the client did not match because the server has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+          -   <main class=\\"only\\" /> <-- server
+            </div>
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -705,12 +807,12 @@ describe('ReactDOMServerHydration', () => {
         }
         // TODO: This message doesn't seem to have any useful details.
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -728,15 +830,19 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <p> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: The content rendered by the server and the client did not match because the server has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+          -   <p>...</p> <-- server
+            </div>
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -753,16 +859,16 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <main> in <div>.
-                in main (at **)
-                in Suspense (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching <main> in <div>.
+              in main (at **)
+              in Suspense (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -779,16 +885,16 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <footer> in <div>.
-                in footer (at **)
-                in Suspense (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching <footer> in <div>.
+              in footer (at **)
+              in Suspense (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -853,18 +959,18 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <header> in <div>.
-                in header (at **)
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: Expected server HTML to contain a matching <header> in <div>.
+              in header (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
@@ -883,15 +989,20 @@ describe('ReactDOMServerHydration', () => {
           );
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <header> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-            ]
-          `);
+          Array [
+            "Warning: The content rendered by the server and the client did not match because the server has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+          -   <header class=\\"1\\" /> <-- server
+              ...
+            </div>
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
       });
     });
   });
@@ -932,18 +1043,18 @@ describe('ReactDOMServerHydration', () => {
       }
 
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          Array [
-            "Warning: Expected server HTML to contain a matching <footer> in <div>.
-              in footer (at **)
-              in Panel (at **)
-              in div (at **)
-              in ProfileSettings (at **)
-              in Mismatch (at **)",
-            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-          ]
-        `);
+        Array [
+          "Warning: Expected server HTML to contain a matching <footer> in <div>.
+            in footer (at **)
+            in Panel (at **)
+            in div (at **)
+            in ProfileSettings (at **)
+            in Mismatch (at **)",
+          "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+          "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+          "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+        ]
+      `);
     });
 
     // @gate __DEV__
@@ -981,16 +1092,22 @@ describe('ReactDOMServerHydration', () => {
       }
 
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          Array [
-            "Warning: Did not expect server HTML to contain a <footer> in <div>.
-              in div (at **)
-              in ProfileSettings (at **)
-              in Mismatch (at **)",
-            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
-            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
-            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-          ]
-        `);
+        Array [
+          "Warning: The content rendered by the server and the client did not match because the server has rendered an extra element. The mismatch occurred inside of this parent:
+
+          <div class=\\"parent\\">
+            ...
+            <main class=\\"2\\" />
+        -   <footer class=\\"3\\" /> <-- server
+          </div>
+            in div (at **)
+            in ProfileSettings (at **)
+            in Mismatch (at **)",
+          "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+          "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+          "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+        ]
+      `);
     });
   });
 });
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 75e017a451836..6394f5a1eef32 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -1200,6 +1200,109 @@ export function diffHydratedText(
   return isDifferent;
 }
 
+function formatAttributes(element: Element): string {
+  let str = '';
+  const attributes = element.attributes;
+  for (let i = 0; i < attributes.length; i++) {
+    if (i > 30) {
+      str += ' ...';
+      break;
+    }
+    const attributeName = attributes[i].name;
+    const value = attributes[i].value;
+    if (value != null) {
+      let trimmedValue = value;
+      if (value.length > 30) {
+        trimmedValue = value.substr(0, 30) + '...';
+      }
+      // TODO: what about quotes in attr values
+      str += ' ' + attributeName + '="' + trimmedValue + '"';
+    }
+  }
+  return str;
+}
+
+function formatElement(element, indentation, formattedChildren) {
+  let str = indentation + '<' + element.nodeName.toLowerCase();
+  str += formatAttributes(element);
+  if (formattedChildren === null) {
+    if (element.innerHTML !== '') {
+      str += '>...';
+      str += '</' + element.nodeName.toLowerCase() + '>';
+    } else {
+      str += ' />';
+    }
+  } else {
+    str += '>\n' + formattedChildren;
+    str += '\n' + indentation;
+    str += '</' + element.nodeName.toLowerCase() + '>';
+  }
+  return str;
+}
+
+function formatNode(node, indentation) {
+  switch (node.nodeType) {
+    // TODO: use constants
+    case Node.ELEMENT_NODE:
+      return formatElement(node, indentation, null);
+    case Node.TEXT_NODE:
+      // TODO: trim
+      return indentation + node.textContent;
+    default:
+      return '';
+  }
+}
+
+function shouldIncludeInDiff(node) {
+  return (
+    // TODO: use constants
+    node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE
+  );
+}
+
+function findPreviousSiblingForDiff(node) {
+  let sibling = node.previousSibling;
+  while (sibling !== null) {
+    if (shouldIncludeInDiff(sibling)) {
+      return sibling;
+    }
+    sibling = sibling.previousSibling;
+  }
+  return null;
+}
+
+function findNextSiblingForDiff(node) {
+  let sibling = node.nextSibling;
+  while (sibling !== null) {
+    if (shouldIncludeInDiff(sibling)) {
+      return sibling;
+    }
+    sibling = sibling.nextSibling;
+  }
+  return null;
+}
+
+function formatDiffForExtraServerNode(parentNode, child) {
+  let formattedSibling = null;
+  const prevSibling = findPreviousSiblingForDiff(child);
+  if (prevSibling !== null) {
+    formattedSibling = formatNode(prevSibling, '    ');
+  }
+  let formattedChildren = '';
+  if (formattedSibling !== null) {
+    if (findPreviousSiblingForDiff(prevSibling) !== null) {
+      formattedChildren += '    ...\n';
+    }
+    formattedChildren += formattedSibling + '\n';
+  }
+  formattedChildren += formatNode(child, '-   ');
+  formattedChildren += ' <-- server';
+  if (findNextSiblingForDiff(child) !== null) {
+    formattedChildren += '\n    ...';
+  }
+  return formatElement(parentNode, '  ', formattedChildren);
+}
+
 export function warnForDeletedHydratableElement(
   parentNode: Element | Document | DocumentFragment,
   child: Element,
@@ -1210,9 +1313,10 @@ export function warnForDeletedHydratableElement(
     }
     didWarnInvalidHydration = true;
     console.error(
-      'Did not expect server HTML to contain a <%s> in <%s>.',
-      child.nodeName.toLowerCase(),
-      parentNode.nodeName.toLowerCase(),
+      'The content rendered by the server and the client did not match ' +
+        'because the server has rendered an extra element. ' +
+        'The mismatch occurred inside of this parent:\n\n%s',
+      formatDiffForExtraServerNode(parentNode, child),
     );
   }
 }
@@ -1227,9 +1331,10 @@ export function warnForDeletedHydratableText(
     }
     didWarnInvalidHydration = true;
     console.error(
-      'Did not expect server HTML to contain the text node "%s" in <%s>.',
-      child.nodeValue,
-      parentNode.nodeName.toLowerCase(),
+      'The content rendered by the server and the client did not match ' +
+        'because the server has rendered an extra text node. ' +
+        'The mismatch occurred inside of this parent:\n\n%s',
+      formatDiffForExtraServerNode(parentNode, child),
     );
   }
 }

From f5e5e98e1db7d116beb7693de768a5c904c021c0 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 4 Apr 2022 15:08:40 +0100
Subject: [PATCH 2/5] [WIP] Print react props

---
 .../__tests__/ReactDOMHydrationDiff-test.js   |  4 +-
 .../react-dom/src/client/ReactDOMComponent.js | 69 ++++++++++++++++++-
 2 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index 09edd2caf3234..fe87e4bb5d47c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -243,11 +243,11 @@ describe('ReactDOMServerHydration', () => {
   describe('extra nodes on the client', () => {
     describe('extra elements on the client', () => {
       // @gate __DEV__
-      it('warns when client renders an extra element as only child', () => {
+      fit('warns when client renders an extra element as only child', () => {
         function Mismatch({isClient}) {
           return (
             <div className="parent">
-              {isClient && <main className="only" />}
+              {isClient && <main className="only" style={{opacity: 1}} />}
             </div>
           );
         }
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 6394f5a1eef32..df01decd92b72 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -1222,6 +1222,33 @@ function formatAttributes(element: Element): string {
   return str;
 }
 
+function formatProps(props): string {
+  let str = '';
+  let i = 0;
+  for (let prop in props) {
+    if (!props.hasOwnProperty(prop)) {
+      continue;
+    }
+    if (i > 30) {
+      str += ' ...';
+      break;
+    }
+    const attributeName = prop;
+    const value = props[prop];
+    if (value != null) {
+      // TODO: what about non-strings
+      let trimmedValue = JSON.stringify(value);
+      if (value.length > 30) {
+        trimmedValue = value.substr(0, 30) + '...';
+      }
+      // TODO: what about quotes in attr values
+      str += ' ' + attributeName + '={' + trimmedValue + '}';
+    }
+    i++;
+  }
+  return str;
+}
+
 function formatElement(element, indentation, formattedChildren) {
   let str = indentation + '<' + element.nodeName.toLowerCase();
   str += formatAttributes(element);
@@ -1240,6 +1267,18 @@ function formatElement(element, indentation, formattedChildren) {
   return str;
 }
 
+function formatReactElement(tag, props, indentation) {
+  let str = indentation + '<' + tag.toLowerCase();
+  str += formatProps(props);
+  if (props.children != null) {
+    str += '>...';
+    str += '</' + tag.toLowerCase() + '>';
+  } else {
+    str += ' />';
+  }
+  return str;
+}
+
 function formatNode(node, indentation) {
   switch (node.nodeType) {
     // TODO: use constants
@@ -1303,6 +1342,29 @@ function formatDiffForExtraServerNode(parentNode, child) {
   return formatElement(parentNode, '  ', formattedChildren);
 }
 
+function formatDiffForExtraClientNode(parentNode, tag, props) {
+  // TODO
+  let formattedSibling = null;
+  // const prevSibling = findPreviousSiblingForDiff(child);
+  // if (prevSibling !== null) {
+  //   formattedSibling = formatNode(prevSibling, '    ');
+  // }
+  let formattedChildren = '';
+  if (formattedSibling !== null) {
+    if (findPreviousSiblingForDiff(prevSibling) !== null) {
+      formattedChildren += '    ...\n';
+    }
+    formattedChildren += formattedSibling + '\n';
+  }
+  formattedChildren += formatReactElement(tag, props, '+   ');
+  formattedChildren += ' <-- client';
+  // if (findNextSiblingForDiff(child) !== null) {
+  //   formattedChildren += '\n    ...';
+  // }
+  return formatElement(parentNode, '  ', formattedChildren);
+}
+
+
 export function warnForDeletedHydratableElement(
   parentNode: Element | Document | DocumentFragment,
   child: Element,
@@ -1350,9 +1412,10 @@ export function warnForInsertedHydratedElement(
     }
     didWarnInvalidHydration = true;
     console.error(
-      'Expected server HTML to contain a matching <%s> in <%s>.',
-      tag,
-      parentNode.nodeName.toLowerCase(),
+      'The content rendered by the server and the client did not match ' +
+        'because the client has rendered an extra element. ' +
+        'The mismatch occurred inside of this parent:\n\n%s',
+      formatDiffForExtraClientNode(parentNode, tag, props),
     );
   }
 }

From 21a7b3e4ccfd0fbdc5f0108401d1bb66363971d1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 4 Apr 2022 15:30:18 +0100
Subject: [PATCH 3/5] Improve formatting

---
 .../src/__tests__/ReactDOMHydrationDiff-test.js    |  4 ++--
 packages/react-dom/src/client/ReactDOMComponent.js | 14 ++++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index fe87e4bb5d47c..e35a5e17f5daa 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -246,8 +246,8 @@ describe('ReactDOMServerHydration', () => {
       fit('warns when client renders an extra element as only child', () => {
         function Mismatch({isClient}) {
           return (
-            <div className="parent">
-              {isClient && <main className="only" style={{opacity: 1}} />}
+            <div className="parent" style={{ opacity: 1}} onClick={() => {}}>
+              {isClient && <main className="only" style={{ opacity: 1 }} onClick={() => {}} />}
             </div>
           );
         }
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index df01decd92b72..c99a375532c09 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -1235,14 +1235,20 @@ function formatProps(props): string {
     }
     const attributeName = prop;
     const value = props[prop];
-    if (value != null) {
-      // TODO: what about non-strings
+    if (
+      value != null &&
+      typeof value !== 'function' &&
+      typeof value !== 'symbol'
+    ) {
       let trimmedValue = JSON.stringify(value);
       if (value.length > 30) {
         trimmedValue = value.substr(0, 30) + '...';
       }
-      // TODO: what about quotes in attr values
-      str += ' ' + attributeName + '={' + trimmedValue + '}';
+      if (typeof value === 'string') {
+        str += ' ' + attributeName + '=' + trimmedValue + '';
+      } else {
+        str += ' ' + attributeName + '={' + trimmedValue + '}';
+      }
     }
     i++;
   }

From 2fe2a926a2d3b1d8961d0754d810384ce3996e1f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 4 Apr 2022 15:51:44 +0100
Subject: [PATCH 4/5] Pass mismatching instance

---
 .../__tests__/ReactDOMHydrationDiff-test.js   | 14 ++++++---
 .../react-dom/src/client/ReactDOMComponent.js | 26 ++++++++++-------
 .../src/client/ReactDOMHostConfig.js          | 24 +++++++++++++--
 .../src/ReactFiberHydrationContext.new.js     | 29 ++++++++++++++-----
 4 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index e35a5e17f5daa..3e8af9cb29392 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -243,11 +243,17 @@ describe('ReactDOMServerHydration', () => {
   describe('extra nodes on the client', () => {
     describe('extra elements on the client', () => {
       // @gate __DEV__
-      fit('warns when client renders an extra element as only child', () => {
+      it('warns when client renders an extra element as only child', () => {
         function Mismatch({isClient}) {
           return (
-            <div className="parent" style={{ opacity: 1}} onClick={() => {}}>
-              {isClient && <main className="only" style={{ opacity: 1 }} onClick={() => {}} />}
+            <div className="parent" style={{opacity: 1}} onClick={() => {}}>
+              {isClient && (
+                <main
+                  className="only"
+                  style={{opacity: 1}}
+                  onClick={() => {}}
+                />
+              )}
             </div>
           );
         }
@@ -499,7 +505,7 @@ describe('ReactDOMServerHydration', () => {
       });
 
       // @gate __DEV__
-      it('warns when server renders an extra element in the beginning', () => {
+      fit('warns when server renders an extra element in the beginning', () => {
         function Mismatch({isClient}) {
           return (
             <div className="parent">
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index c99a375532c09..ea2068902c3e3 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -1348,13 +1348,17 @@ function formatDiffForExtraServerNode(parentNode, child) {
   return formatElement(parentNode, '  ', formattedChildren);
 }
 
-function formatDiffForExtraClientNode(parentNode, tag, props) {
-  // TODO
+function formatDiffForExtraClientNode(parentNode, tag, props, mismatchNode) {
   let formattedSibling = null;
-  // const prevSibling = findPreviousSiblingForDiff(child);
-  // if (prevSibling !== null) {
-  //   formattedSibling = formatNode(prevSibling, '    ');
-  // }
+  let prevSibling = null;
+  if (mismatchNode !== null) {
+    prevSibling = findPreviousSiblingForDiff(mismatchNode);
+  } else if (parentNode.lastChild !== null) {
+    prevSibling = parentNode.lastChild;
+  }
+  if (prevSibling !== null) {
+    formattedSibling = formatNode(prevSibling, '    ');
+  }
   let formattedChildren = '';
   if (formattedSibling !== null) {
     if (findPreviousSiblingForDiff(prevSibling) !== null) {
@@ -1364,13 +1368,12 @@ function formatDiffForExtraClientNode(parentNode, tag, props) {
   }
   formattedChildren += formatReactElement(tag, props, '+   ');
   formattedChildren += ' <-- client';
-  // if (findNextSiblingForDiff(child) !== null) {
-  //   formattedChildren += '\n    ...';
-  // }
+  if (mismatchNode !== null) {
+    formattedChildren += '\n    ...';
+  }
   return formatElement(parentNode, '  ', formattedChildren);
 }
 
-
 export function warnForDeletedHydratableElement(
   parentNode: Element | Document | DocumentFragment,
   child: Element,
@@ -1411,6 +1414,7 @@ export function warnForInsertedHydratedElement(
   parentNode: Element | Document | DocumentFragment,
   tag: string,
   props: Object,
+  mismatchInstance,
 ) {
   if (__DEV__) {
     if (didWarnInvalidHydration) {
@@ -1421,7 +1425,7 @@ export function warnForInsertedHydratedElement(
       'The content rendered by the server and the client did not match ' +
         'because the client has rendered an extra element. ' +
         'The mismatch occurred inside of this parent:\n\n%s',
-      formatDiffForExtraClientNode(parentNode, tag, props),
+      formatDiffForExtraClientNode(parentNode, tag, props, mismatchInstance),
     );
   }
 }
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 4b640055e5b4e..6225b33ba3ded 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -1020,9 +1020,15 @@ export function didNotFindHydratableInstanceWithinContainer(
   parentContainer: Container,
   type: string,
   props: Props,
+  lastHydratedChild,
 ) {
   if (__DEV__) {
-    warnForInsertedHydratedElement(parentContainer, type, props);
+    warnForInsertedHydratedElement(
+      parentContainer,
+      type,
+      props,
+      lastHydratedChild,
+    );
   }
 }
 
@@ -1047,12 +1053,18 @@ export function didNotFindHydratableInstanceWithinSuspenseInstance(
   parentInstance: SuspenseInstance,
   type: string,
   props: Props,
+  lastHydratedChild,
 ) {
   if (__DEV__) {
     // $FlowFixMe: Only Element or Document can be parent nodes.
     const parentNode: Element | Document | null = parentInstance.parentNode;
     if (parentNode !== null)
-      warnForInsertedHydratedElement(parentNode, type, props);
+      warnForInsertedHydratedElement(
+        parentNode,
+        type,
+        props,
+        lastHydratedChild,
+      );
   }
 }
 
@@ -1083,10 +1095,16 @@ export function didNotFindHydratableInstance(
   type: string,
   props: Props,
   isConcurrentMode: boolean,
+  lastHydratedChild,
 ) {
   if (__DEV__) {
     if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
-      warnForInsertedHydratedElement(parentInstance, type, props);
+      warnForInsertedHydratedElement(
+        parentInstance,
+        type,
+        props,
+        lastHydratedChild,
+      );
     }
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 26b05d008ac53..64cbd2173b176 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -194,7 +194,11 @@ function deleteHydratableInstance(
   }
 }
 
-function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
+function warnNonhydratedInstance(
+  returnFiber: Fiber,
+  fiber: Fiber,
+  mismatchInstance,
+) {
   if (__DEV__) {
     if (didSuspend) {
       // Inside a boundary that already suspended. We're currently rendering the
@@ -214,6 +218,7 @@ function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
               parentContainer,
               type,
               props,
+              mismatchInstance,
             );
             break;
           case HostText:
@@ -249,6 +254,7 @@ function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
               props,
               // TODO: Delete this argument when we remove the legacy root API.
               isConcurrentMode,
+              mismatchInstance,
             );
             break;
           }
@@ -289,6 +295,7 @@ function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
                 parentInstance,
                 type,
                 props,
+                mismatchInstance,
               );
               break;
             case HostText:
@@ -311,9 +318,13 @@ function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
     }
   }
 }
-function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
+function insertNonHydratedInstance(
+  returnFiber: Fiber,
+  fiber: Fiber,
+  mismatchInstance,
+) {
   fiber.flags = (fiber.flags & ~Hydrating) | Placement;
-  warnNonhydratedInstance(returnFiber, fiber);
+  warnNonhydratedInstance(returnFiber, fiber, lastHydratedChild);
 }
 
 function tryHydrate(fiber, nextInstance) {
@@ -396,11 +407,11 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   let nextInstance = nextHydratableInstance;
   if (!nextInstance) {
     if (shouldClientRenderOnMismatch(fiber)) {
-      warnNonhydratedInstance((hydrationParentFiber: any), fiber);
+      warnNonhydratedInstance((hydrationParentFiber: any), fiber, nextInstance);
       throwOnHydrationMismatch(fiber);
     }
     // Nothing to hydrate. Make it an insertion.
-    insertNonHydratedInstance((hydrationParentFiber: any), fiber);
+    insertNonHydratedInstance((hydrationParentFiber: any), fiber, nextInstance);
     isHydrating = false;
     hydrationParentFiber = fiber;
     return;
@@ -408,7 +419,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   const firstAttemptedInstance = nextInstance;
   if (!tryHydrate(fiber, nextInstance)) {
     if (shouldClientRenderOnMismatch(fiber)) {
-      warnNonhydratedInstance((hydrationParentFiber: any), fiber);
+      warnNonhydratedInstance((hydrationParentFiber: any), fiber, nextInstance);
       throwOnHydrationMismatch(fiber);
     }
     // If we can't hydrate this instance let's try the next one.
@@ -418,7 +429,11 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
     const prevHydrationParentFiber: Fiber = (hydrationParentFiber: any);
     if (!nextInstance || !tryHydrate(fiber, nextInstance)) {
       // Nothing to hydrate. Make it an insertion.
-      insertNonHydratedInstance((hydrationParentFiber: any), fiber);
+      insertNonHydratedInstance(
+        (hydrationParentFiber: any),
+        fiber,
+        nextInstance,
+      );
       isHydrating = false;
       hydrationParentFiber = fiber;
       return;

From 35c1424b35d036c8941e562a32da55ea5f4a1c1b Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 4 Apr 2022 16:20:56 +0100
Subject: [PATCH 5/5] Add more context for insertions

---
 .../__tests__/ReactDOMHydrationDiff-test.js   | 111 +++++++++++++++---
 .../react-dom/src/client/ReactDOMComponent.js |  23 ++--
 .../src/ReactFiberHydrationContext.new.js     |   2 +-
 3 files changed, 111 insertions(+), 25 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index 3e8af9cb29392..165ce776fb713 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -259,7 +259,12 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
-            "Warning: Expected server HTML to contain a matching <main> in <div>.
+            "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\" style=\\"opacity:1\\">
+          +   <main className=\\"only\\" style={{\\"opacity\\":1}} /> <-- client
+
+            </div>
               in main (at **)
               in div (at **)
               in Mismatch (at **)",
@@ -283,7 +288,13 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
-            "Warning: Expected server HTML to contain a matching <header> in <div>.
+            "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+          -   <main class=\\"2\\" /> <-- server
+          +   <header className=\\"1\\" /> <-- client
+              ...
+            </div>
               in header (at **)
               in div (at **)
               in Mismatch (at **)",
@@ -307,7 +318,14 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
-            "Warning: Expected server HTML to contain a matching <main> in <div>.
+            "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+              <header class=\\"1\\" />
+          -   <footer class=\\"3\\" /> <-- server
+          +   <main className=\\"2\\" /> <-- client
+              ...
+            </div>
               in main (at **)
               in div (at **)
               in Mismatch (at **)",
@@ -331,7 +349,14 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
-            "Warning: Expected server HTML to contain a matching <footer> in <div>.
+            "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+              ...
+              <main class=\\"2\\" />
+          +   <footer className=\\"3\\" /> <-- client
+
+            </div>
               in footer (at **)
               in div (at **)
               in Mismatch (at **)",
@@ -354,7 +379,13 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
-            "Warning: Expected server HTML to contain a matching <footer> in <div>.
+            "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+              one
+          +   <footer className=\\"2\\" /> <-- client
+
+            </div>
               in footer (at **)
               in div (at **)
               in Mismatch (at **)",
@@ -505,7 +536,7 @@ describe('ReactDOMServerHydration', () => {
       });
 
       // @gate __DEV__
-      fit('warns when server renders an extra element in the beginning', () => {
+      it('warns when server renders an extra element in the beginning', () => {
         function Mismatch({isClient}) {
           return (
             <div className="parent">
@@ -517,7 +548,13 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
-            "Warning: Expected server HTML to contain a matching <main> in <div>.
+            "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+          -   <header class=\\"1\\" /> <-- server
+          +   <main className=\\"2\\" /> <-- client
+              ...
+            </div>
               in main (at **)
               in div (at **)
               in Mismatch (at **)",
@@ -542,7 +579,14 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
-            "Warning: Expected server HTML to contain a matching <footer> in <div>.
+            "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+              <header class=\\"1\\" />
+          -   <main class=\\"2\\" /> <-- server
+          +   <footer className=\\"3\\" /> <-- client
+              ...
+            </div>
               in footer (at **)
               in div (at **)
               in Mismatch (at **)",
@@ -645,7 +689,13 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
-            "Warning: Expected server HTML to contain a matching <main> in <div>.
+            "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+          -   first <-- server
+          +   <main className=\\"2\\" /> <-- client
+              ...
+            </div>
               in main (at **)
               in div (at **)
               in Mismatch (at **)",
@@ -670,7 +720,14 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
-            "Warning: Expected server HTML to contain a matching <footer> in <div>.
+            "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+              <header class=\\"1\\" />
+          -   second <-- server
+          +   <footer className=\\"3\\" /> <-- client
+              ...
+            </div>
               in footer (at **)
               in div (at **)
               in Mismatch (at **)",
@@ -866,7 +923,14 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
-            "Warning: Expected server HTML to contain a matching <main> in <div>.
+            "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+              <header class=\\"1\\" />
+          -   <footer class=\\"3\\" /> <-- server
+          +   <main className=\\"second\\" /> <-- client
+              ...
+            </div>
               in main (at **)
               in Suspense (at **)
               in div (at **)
@@ -892,7 +956,14 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
-            "Warning: Expected server HTML to contain a matching <footer> in <div>.
+            "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+              <header class=\\"1\\" />
+          -   <main class=\\"second\\" /> <-- server
+          +   <footer className=\\"3\\" /> <-- client
+              ...
+            </div>
               in footer (at **)
               in Suspense (at **)
               in div (at **)
@@ -966,7 +1037,12 @@ describe('ReactDOMServerHydration', () => {
         }
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
-            "Warning: Expected server HTML to contain a matching <header> in <div>.
+            "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+            <div class=\\"parent\\">
+          +   <header className=\\"1\\" /> <-- client
+
+            </div>
               in header (at **)
               in div (at **)
               in Mismatch (at **)",
@@ -1050,7 +1126,14 @@ describe('ReactDOMServerHydration', () => {
 
       expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
         Array [
-          "Warning: Expected server HTML to contain a matching <footer> in <div>.
+          "Warning: The content rendered by the server and the client did not match because the client has rendered an extra element. The mismatch occurred inside of this parent:
+
+          <div class=\\"parent\\">
+            ...
+            <main class=\\"2\\" />
+        +   <footer className=\\"3\\" /> <-- client
+
+          </div>
             in footer (at **)
             in Panel (at **)
             in div (at **)
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index ea2068902c3e3..a9772152f4b24 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -1351,25 +1351,28 @@ function formatDiffForExtraServerNode(parentNode, child) {
 function formatDiffForExtraClientNode(parentNode, tag, props, mismatchNode) {
   let formattedSibling = null;
   let prevSibling = null;
-  if (mismatchNode !== null) {
+  if (mismatchNode != null) {
     prevSibling = findPreviousSiblingForDiff(mismatchNode);
   } else if (parentNode.lastChild !== null) {
     prevSibling = parentNode.lastChild;
   }
+  let formattedChildren = '';
   if (prevSibling !== null) {
     formattedSibling = formatNode(prevSibling, '    ');
-  }
-  let formattedChildren = '';
-  if (formattedSibling !== null) {
-    if (findPreviousSiblingForDiff(prevSibling) !== null) {
-      formattedChildren += '    ...\n';
+    if (formattedSibling !== null) {
+      if (findPreviousSiblingForDiff(prevSibling) !== null) {
+        formattedChildren += '    ...\n';
+      }
+      formattedChildren += formattedSibling + '\n';
     }
-    formattedChildren += formattedSibling + '\n';
+  }
+  if (mismatchNode != null) {
+    formattedChildren += formatNode(mismatchNode, '-   ') + ' <-- server\n';
   }
   formattedChildren += formatReactElement(tag, props, '+   ');
-  formattedChildren += ' <-- client';
-  if (mismatchNode !== null) {
-    formattedChildren += '\n    ...';
+  formattedChildren += ' <-- client\n';
+  if (mismatchNode != null) {
+    formattedChildren += '    ...';
   }
   return formatElement(parentNode, '  ', formattedChildren);
 }
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 64cbd2173b176..b8c7b94ea77fe 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -324,7 +324,7 @@ function insertNonHydratedInstance(
   mismatchInstance,
 ) {
   fiber.flags = (fiber.flags & ~Hydrating) | Placement;
-  warnNonhydratedInstance(returnFiber, fiber, lastHydratedChild);
+  warnNonhydratedInstance(returnFiber, fiber, mismatchInstance);
 }
 
 function tryHydrate(fiber, nextInstance) {