Learn the vocabulary of keeping server-rendered markup and the client's first render identical.
0 / 5 completed
1 / 5
At standup, a dev mentions the server-rendered HTML for a page not matching what the client's first render would produce, triggering a warning and potentially broken interactivity once the client takes over. What is this problem called?
A hydration mismatch happens when the server-rendered HTML for a page doesn't match what the client's first render would produce, triggering a warning and potentially breaking interactivity once the client's JavaScript takes over the already-rendered markup. A cache stampede is an entirely different problem involving many concurrent requests overwhelming an origin, with no relation to server-versus-client rendering differences. This mismatch between server and client output is specifically what hydration is meant to reconcile, and what breaks when it can't.
2 / 5
During a design review, the team wants a non-deterministic value, like the current time or a random number, to only be rendered after the component has mounted on the client, rather than during the initial render both the server and client perform. Which capability supports this?
Deferring a non-deterministic value's render to after mount, such as inside a useEffect that runs only on the client, keeps the server-rendered markup and the client's initial render identical, since both skip that non-deterministic value up front. Rendering the value directly during the initial render, with no deferral, produces a different value on the server than what the client would compute a moment later, causing a mismatch. This deferral is a standard fix whenever a component genuinely needs a value that can't be identical between server and client.
3 / 5
In a code review, a dev notices the mismatch traced to a component calling new Date() or Math.random() directly during render, producing a different value on the server than the client computes for its own initial render. What does this represent?
A non-deterministic render call, like calling new Date() or Math.random() directly during render, produces a different value on the server than the client computes a moment later for its own initial render, since the two calls happen at genuinely different times. A deterministic render call, by contrast, always produces the exact same value regardless of when or where it runs, carrying no such mismatch risk. Identifying this kind of call is usually the first step in tracking down the source of a hydration mismatch.
4 / 5
An incident report shows an application broke for users because a component read window during a server-side render check, producing markup that differed from the client's own render and leaving several event handlers un-attached after hydration. What practice would prevent this?
Guarding any window-dependent logic so it only runs on the client, after mount, keeps the server and client markup identical during the initial render, since the server never attempts to access an object it doesn't actually have. Continuing to read window directly during the initial render, with no such guard, is exactly what produced the mismatched markup and un-attached event handlers in this incident. This guarding is a standard practice whenever code needs to reference a browser-only global that simply doesn't exist during server rendering.
5 / 5
During a PR review, a teammate asks why the team defers a window- or random-based value to a client-only effect instead of just rendering it directly during the component's initial render. What is the reasoning?
Rendering it directly during the initial render produces a different value on the server than the client computes moments later, since the two environments evaluate that value at genuinely different times, causing a hydration mismatch. Deferring it to a client-only effect keeps the initial render identical on both sides, since neither one attempts to compute the non-deterministic value up front. The tradeoff is that the value then only appears after mount, so a brief placeholder or loading state is usually needed for the moment before that effect runs.