Skip to content

React 18 Bug: Hydration mismatch if empty string is rendered #22784

@eps1lon

Description

@eps1lon

React version: 18.0.0-beta-4ff5f5719-20211115

Steps To Reproduce

  1. 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 (

if (current === null) {
tryToClaimNextHydratableInstance(workInProgress);
}
). But since an empty string won't appear as a text node (if we just set innerHTML = string), the reconciler thinks there's a mismatch. In legacy roots we didn't throw but warn unless we had an empty string:
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

Metadata

Metadata

Assignees

No one assigned

    Labels

    React 18Bug reports, questions, and general feedback about React 18Status: UnconfirmedA potential issue that we haven't yet confirmed as a bugType: Bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions