Add favorSafetyOverHydrationPerf flag

If false, this ignores text comparison checks during hydration at the risk of privacy safety.
facebook · Mar 27, 2024 · db0f3b9 · db0f3b9
1 parent 2ec2aae
commit db0f3b9
Show file tree

Hide file tree

Showing 19 changed files with 415 additions and 254 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -4423,6 +4423,7 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate favorSafetyOverHydrationPerf
   it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => {
     const makeApp = () => {
       let resolve, resolved;
@@ -4506,6 +4507,7 @@ describe('ReactDOMFizzServer', () => {
     await waitForAll([]);
   });
 
+  // @gate favorSafetyOverHydrationPerf
   it('only warns once on hydration mismatch while within a suspense boundary', async () => {
     const originalConsoleError = console.error;
     const mockError = jest.fn();

diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -6446,6 +6446,7 @@ body {
       );
     });
 
+    // @gate favorSafetyOverHydrationPerf
     it('retains styles even when a new html, head, and/body mount', async () => {
       await act(() => {
         const {pipe} = renderToPipeableStream(
@@ -8230,6 +8231,7 @@ background-color: green;
       ]);
     });
 
+    // @gate favorSafetyOverHydrationPerf
     it('can render a title before a singleton even if that singleton clears its contents', async () => {
       await act(() => {
         const {pipe} = renderToPipeableStream(

diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -80,30 +80,55 @@ describe('ReactDOMServerHydration', () => {
           </div>
         );
       }
-      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-        [
-          "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-          "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+      if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+                  [
+                    "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+                    "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+                  - A server/client branch \`if (typeof window !== 'undefined')\`.
+                  - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+                  - Date formatting in a user's locale which doesn't match the server.
+                  - External changing data without sending a snapshot of it along with the HTML.
+                  - Invalid HTML tag nesting.
+
+                  It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+                  https://react.dev/link/hydration-mismatch
+
+                    <Mismatch isClient={true}>
+                      <div className="parent">
+                        <main className="child">
+                  +       client
+                  -       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.]",
+                  ]
+              `);
+      } else {
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Warning: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
 
-        - A server/client branch \`if (typeof window !== 'undefined')\`.
-        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
-        - Date formatting in a user's locale which doesn't match the server.
-        - External changing data without sending a snapshot of it along with the HTML.
-        - Invalid HTML tag nesting.
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
 
-        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
 
-        https://react.dev/link/hydration-mismatch
+          https://react.dev/link/hydration-mismatch
 
-          <Mismatch isClient={true}>
-            <div className="parent">
-              <main className="child">
-        +       client
-        -       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.]",
-        ]
-      `);
+            <Mismatch isClient={true}>
+              <div className="parent">
+                <main className="child">
+          +       client
+          -       server
+          ",
+          ]
+        `);
+      }
     });
 
     // @gate __DEV__
@@ -120,29 +145,53 @@ describe('ReactDOMServerHydration', () => {
       }
 
       /* eslint-disable no-irregular-whitespace */
-      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-        [
-          "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-          "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+      if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          [
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
 
-        - A server/client branch \`if (typeof window !== 'undefined')\`.
-        - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
-        - Date formatting in a user's locale which doesn't match the server.
-        - External changing data without sending a snapshot of it along with the HTML.
-        - Invalid HTML tag nesting.
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
 
-        It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
 
-        https://react.dev/link/hydration-mismatch
+          https://react.dev/link/hydration-mismatch
 
-          <Mismatch isClient={true}>
-            <div>
-        +     This markup contains an nbsp entity:   client text
-        -     This markup contains an nbsp entity:   server text
-        ]",
-          "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-        ]
-      `);
+            <Mismatch isClient={true}>
+              <div>
+          +     This markup contains an nbsp entity:   client text
+          -     This markup contains an nbsp entity:   server text
+          ]",
+            "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(`
+          [
+            "Warning: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
+
+          - A server/client branch \`if (typeof window !== 'undefined')\`.
+          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+          - Date formatting in a user's locale which doesn't match the server.
+          - External changing data without sending a snapshot of it along with the HTML.
+          - Invalid HTML tag nesting.
+
+          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+          https://react.dev/link/hydration-mismatch
+
+            <Mismatch isClient={true}>
+              <div>
+          +     This markup contains an nbsp entity:   client text
+          -     This markup contains an nbsp entity:   server text
+          ",
+          ]
+        `);
+      }
       /* eslint-enable no-irregular-whitespace */
     });
 
@@ -549,29 +598,53 @@ describe('ReactDOMServerHydration', () => {
         function Mismatch({isClient}) {
           return <div className="parent">{isClient && 'only'}</div>;
         }
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          [
-            "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
-            "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+        if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+                      [
+                        "Warning: An error occurred during hydration. The server HTML was replaced with client content.",
+                        "Caught [Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
+
+                      - A server/client branch \`if (typeof window !== 'undefined')\`.
+                      - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+                      - Date formatting in a user's locale which doesn't match the server.
+                      - External changing data without sending a snapshot of it along with the HTML.
+                      - Invalid HTML tag nesting.
+
+                      It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+
+                      https://react.dev/link/hydration-mismatch
+
+                        <Mismatch isClient={true}>
+                          <div className="parent">
+                      +     only
+                      -     
+                      ]",
+                        "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(`
+            [
+              "Warning: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
 
-          - A server/client branch \`if (typeof window !== 'undefined')\`.
-          - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
-          - Date formatting in a user's locale which doesn't match the server.
-          - External changing data without sending a snapshot of it along with the HTML.
-          - Invalid HTML tag nesting.
+            - A server/client branch \`if (typeof window !== 'undefined')\`.
+            - Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
+            - Date formatting in a user's locale which doesn't match the server.
+            - External changing data without sending a snapshot of it along with the HTML.
+            - Invalid HTML tag nesting.
 
-          It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
+            It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
 
-          https://react.dev/link/hydration-mismatch
+            https://react.dev/link/hydration-mismatch
 
-            <Mismatch isClient={true}>
-              <div className="parent">
-          +     only
-          -     
-          ]",
-            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
-          ]
-        `);
+              <Mismatch isClient={true}>
+                <div className="parent">
+            +     only
+            -     
+            ",
+            ]
+          `);
+        }
       });
 
       // @gate __DEV__

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -372,10 +372,12 @@ describe('ReactDOMServerIntegration', () => {
         expect(e.getAttribute('ref')).toBe(null);
       });
 
-      itRenders('no children attribute', async render => {
-        const e = await render(React.createElement('div', {}, 'foo'));
-        expect(e.getAttribute('children')).toBe(null);
-      });
+      if (ReactFeatureFlags.favorSafetyOverHydrationPerf) {
+        itRenders('no children attribute', async render => {
+          const e = await render(React.createElement('div', {}, 'foo'));
+          expect(e.getAttribute('children')).toBe(null);
+        });
+      }
 
       itRenders('no key attribute', async render => {
         const e = await render(<div key="foo" />);

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationBasic-test.js
@@ -11,6 +11,7 @@
 'use strict';
 
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+const ReactFeatureFlags = require('shared/ReactFeatureFlags');
 
 const TEXT_NODE_TYPE = 3;
 
@@ -82,11 +83,13 @@ describe('ReactDOMServerIntegration', () => {
       }
     });
 
-    itRenders('an array with one child', async render => {
-      const e = await render([<div key={1}>text1</div>]);
-      const parent = e.parentNode;
-      expect(parent.childNodes[0].tagName).toBe('DIV');
-    });
+    if (ReactFeatureFlags.favorSafetyOverHydrationPerf) {
+      itRenders('an array with one child', async render => {
+        const e = await render([<div key={1}>text1</div>]);
+        const parent = e.parentNode;
+        expect(parent.childNodes[0].tagName).toBe('DIV');
+      });
+    }
 
     itRenders('an array with several children', async render => {
       const Header = props => {