-
Notifications
You must be signed in to change notification settings - Fork 49.2k
Description
React version: 18.0.0-beta-4ff5f5719-20211115
Steps To Reproduce
- Render empty string
ReactDOMServer.renderToString("")
Link to code example: https://codesandbox.io/s/react-18-emptry-string-hydration-mismatch-xz4w9
Original issue: f9d729e
(#1541)
Did some spelunking in the codebase and it seems to me that the reconciler is looking for a hydrateable instance (
react/packages/react-reconciler/src/ReactFiberBeginWork.new.js
Lines 1413 to 1415 in 00ced1e
if (current === null) { | |
tryToClaimNextHydratableInstance(workInProgress); | |
} |
innerHTML = string
), the reconciler thinks there's a mismatch. In legacy roots we didn't throw but warn unless we had an empty string: react/packages/react-dom/src/client/ReactDOMComponent.js
Lines 1202 to 1208 in 75f3dde
if (text === '') { | |
// We expect to insert empty text nodes since they're not represented in | |
// the HTML. | |
// TODO: Remove this special case if we can just avoid inserting empty | |
// text nodes. | |
return; | |
} |
The current behavior
Console error is logged with "An error occurred during hydration. The server HTML was replaced with client content"
The expected behavior
No hydration mismatch just like in React 17: https://codesandbox.io/s/react-17-emptry-string-no-hydration-mismatch-forked-5tgmw