Allow hydrating empty string as null.

facebook · Dec 15, 2024 · a42f0d3 · a42f0d3
1 parent 3012d8b
commit a42f0d3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -1139,7 +1139,9 @@ export function canHydrateInstance(
           } else if (
             rel !== anyProps.rel ||
             element.getAttribute('href') !==
-              (anyProps.href == null ? null : anyProps.href) ||
+              (anyProps.href == null || anyProps.href === ''
+                ? null
+                : anyProps.href) ||
             element.getAttribute('crossorigin') !==
               (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) ||
             element.getAttribute('title') !==
@@ -2984,7 +2986,7 @@ export function hydrateHoistable(
           const node = nodes[i];
           if (
             node.getAttribute('href') !==
-              (props.href == null ? null : props.href) ||
+              (props.href == null || props.href === '' ? null : props.href) ||
             node.getAttribute('rel') !==
               (props.rel == null ? null : props.rel) ||
             node.getAttribute('title') !==

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -62,19 +62,24 @@ describe('ReactDOMServerIntegration', () => {
         expect(e.getAttribute('href')).toBe('');
       });
 
+      itRenders('empty href on other tags', async render => {
+        const e = await render(<link rel="stylesheet" href="" />, 1);
+        expect(e.getAttribute('href')).toBe(null);
+      });
+
+      itRenders('empty href on other tags', async render => {
+        const e = await render(<base href="" />, 1);
+        expect(e.getAttribute('href')).toBe(null);
+      });
+
       itRenders('empty href on other tags', async render => {
         const e = await render(
-          // <link href="" /> would be more sensible.
-          // However, that results in a hydration warning as well.
-          // Our test helpers do not support different error counts for initial
-          // server render and hydration.
-          // The number of errors on the server need to be equal to the number of
-          // errors during hydration.
-          // So we use a <div> instead.
-          <div href="" />,
+          <map>
+            <area alt="" href="" />
+          </map>,
           1,
         );
-        expect(e.getAttribute('href')).toBe(null);
+        expect(e.firstChild.getAttribute('href')).toBe(null);
       });
 
       itRenders('no string prop with true value', async render => {