[react-dom] Normalize attribute whitespace during hydration comparison

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -230,6 +230,16 @@ function warnForPropDifference(
     if (normalizedServerValue === normalizedClientValue) {
       return;
     }
+    // Also check with attribute whitespace normalization: browsers
+    // normalize \t, \n, \r to spaces in HTML attribute values.
+    if (
+      typeof normalizedServerValue === 'string' &&
+      typeof normalizedClientValue === 'string' &&
+      normalizeAttributeValueForComparison(normalizedServerValue) ===
+        normalizeAttributeValueForComparison(normalizedClientValue)
+    ) {
+      return;
+    }
 
     serverDifferences[propName] = serverValue;
   }
@@ -343,6 +353,12 @@ function normalizeHTML(parent: Element, html: string) {
 const NORMALIZE_NEWLINES_REGEX = /\r\n?/g;
 const NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g;
 
+// Browsers normalize tab, newline, and carriage return characters to spaces
+// when parsing HTML attribute values. We normalize these before comparing
+// attribute values during hydration to avoid false mismatches.
+// See: https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double-quoted)-state
+const NORMALIZE_ATTRIBUTE_WHITESPACE_REGEX = /[\t\n\r]/g;
+
 function normalizeMarkupForTextOrAttribute(markup: mixed): string {
   if (__DEV__) {
     checkHtmlStringCoercion(markup);
@@ -353,6 +369,10 @@ function normalizeMarkupForTextOrAttribute(markup: mixed): string {
     .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, '');
 }
 
+function normalizeAttributeValueForComparison(value: string): string {
+  return value.replace(NORMALIZE_ATTRIBUTE_WHITESPACE_REGEX, ' ');
+}
+
 function checkForUnmatchedText(
   serverText: string,
   clientText: string | number | bigint,
@@ -2119,7 +2139,17 @@ function hydrateAttribute(
           if (__DEV__) {
             checkAttributeStringCoercion(value, propKey);
           }
-          if (serverValue === '' + value) {
+          const coercedValue = '' + value;
+          if (serverValue === coercedValue) {
+            return;
+          }
+          // Browsers may normalize whitespace characters (tab, newline,
+          // carriage return) to spaces in attribute values. If the only
+          // difference is this normalization, treat it as a match.
+          if (
+            normalizeAttributeValueForComparison(serverValue) ===
+            normalizeAttributeValueForComparison(coercedValue)
+          ) {
             return;
           }
         }

packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js

@@ -527,6 +527,50 @@ describe('ReactDOMServerHydration', () => {
     });
   });
 
+  describe('attribute whitespace normalization', () => {
+    // @gate __DEV__
+    it('does not warn when attribute values differ only by whitespace normalization', () => {
+      function Mismatch({isClient}) {
+        return (
+          <div className="parent">
+            <main
+              className={isClient ? 'foo bar baz' : 'foo\nbar\nbaz'}
+            />
+          </div>
+        );
+      }
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`[]`);
+    });
+
+    // @gate __DEV__
+    it('does not warn for tab and carriage return normalization', () => {
+      function Mismatch({isClient}) {
+        return (
+          <div className="parent">
+            <main
+              className={isClient ? 'foo bar baz' : 'foo\tbar\r\nbaz'}
+            />
+          </div>
+        );
+      }
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`[]`);
+    });
+
+    // @gate __DEV__
+    it('does not warn for title attribute whitespace normalization', () => {
+      function Mismatch({isClient}) {
+        return (
+          <div>
+            <span
+              title={isClient ? 'line1 line2' : 'line1\nline2'}
+            />
+          </div>
+        );
+      }
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`[]`);
+    });
+  });
+
   describe('extra nodes on the client', () => {
     describe('extra elements on the client', () => {
       // @gate __DEV__