ReactAdvanced#ssr

What is hydration?

The process where React attaches event listeners and state to server-rendered HTML instead of recreating it. If the client render differs from the server HTML you get a hydration mismatch warning.

Example
// mismatch: server has no window
const v = typeof window !== 'undefined' ? localStorage.theme : 'light';
// fix: read it inside useEffect after mount

Related Questions

1
ReactIntermediate#forms

How do you handle forms and validation in React?

Open
2
ReactAdvanced#hooks#effects

What is the difference between useEffect and useLayoutEffect?

Open
3
ReactIntermediate#effects#debugging

What is StrictMode and why does my effect run twice?

Open