Consider Text node in the root hydration

facebook · Sep 29, 2024 · 7776122 · 7776122
1 parent db24098
commit 7776122
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -1047,7 +1047,10 @@ export function canHydrateInstance(
   props: Props,
   inRootOrSingleton: boolean,
 ): null | Instance {
-  while (instance.nodeType === ELEMENT_NODE) {
+  while (
+    instance.nodeType === ELEMENT_NODE ||
+    (inRootOrSingleton && instance.nodeType === TEXT_NODE)
+  ) {
     const element: Element = (instance: any);
     const anyProps = (props: any);
     if (element.nodeName.toLowerCase() !== type.toLowerCase()) {
@@ -1177,11 +1180,9 @@ export function canHydrateInstance(
     }
     instance = nextInstance;
   }
-  // This is a suspense boundary or Text node or we got the end.
+  // This is a suspense boundary or we got the end.
   // Suspense Boundaries are never expected to be injected by 3rd parties. If we see one it should be matched
   // and this is a hydration error.
-  // Text Nodes are also not expected to be injected by 3rd parties. This is less of a guarantee for <body>
-  // but it seems reasonable and conservative to reject this as a hydration error as well
   return null;
 }
 

diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -788,4 +788,20 @@ describe('ReactDOMServerHydration', () => {
 
     expect(ref.current).toBe(button);
   });
+
+  it('ignores text nodes on root when hydrating', async () => {
+    const root = document.createElement('div');
+
+    root.innerHTML = '<button>Click</button>';
+    const button = root.firstChild;
+
+    const emptyText = document.createTextNode('');
+    root.insertBefore(emptyText, button);
+
+    const ref = React.createRef();
+    await act(() => {
+      ReactDOMClient.hydrateRoot(root, <button ref={ref}>Click</button>);
+    });
+    expect(ref.current).toBe(button);
+  });
 });