Skip to content

React 18: hydrateRoot does not issue hydration warnings if initial children is missing #22643

@eps1lon

Description

@eps1lon

I just realized that the way I was using the new hydrateRoot API was completely wrong. Unfortunately, React issued no warnings when omitting the initial children like so

const container = document.getElementById("root");
container.innerHTML = renderToString(<input />);

const root = hydrateRoot(container);
root.render(<input />)

I was hoping for some kind of symetry between createRoot and hydrateRoot which was enforced by the fact that hydratedRoot.render(ui) would actually issue hydration warnings (on the render() call not during hydrateRoot()):

const container = document.getElementById("root");
container.innerHTML = renderToString(<input />);

// no hydration warning
const root = hydrateRoot(container);
// now we do get a hydration warning
root.render(<h1 />)

Maybe this is me just being silly but I would've hoped for a hydration warning on hydrateRoot. Otherwise there's no apparent indication (in an untyped world) that hydrateRoot(container).render(initialUI) is most likely not what you wanted.

Metadata

Metadata

Assignees

No one assigned

    Labels

    React 18Bug reports, questions, and general feedback about React 18Type: Discussion

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions