Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
eps1lon opened this issue Oct 28, 2021 · 1 comment
Labels
React 18 Bug reports, questions, and general feedback about React 18 Type: Discussion

Comments

@eps1lon
Copy link
Collaborator

eps1lon commented Oct 28, 2021

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.

@eps1lon eps1lon added Type: Discussion React 18 Bug reports, questions, and general feedback about React 18 labels Oct 28, 2021
@eps1lon
Copy link
Collaborator Author

eps1lon commented Mar 5, 2022

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

-- https://codesandbox.io/s/react-18-bad-hydrateroot-usage-fdkep7

now issues both a warning for incorrect usage of hydrateRoot and a recoverable error because root.render issues an early update before hydration could finish i.e. it hits both #23356 and #23319.

@eps1lon eps1lon closed this as completed Mar 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
React 18 Bug reports, questions, and general feedback about React 18 Type: Discussion
Projects
None yet
Development

No branches or pull requests

1 participant