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.
What does the "Hydration Mismatch Vocabulary" vocabulary exercise cover?
This exercise tests real IT vocabulary related to hydration mismatch vocabulary through 5 multiple-choice questions, each built from realistic workplace sentences rather than abstract definitions.
Is this vocabulary exercise free to use?
Yes. Every exercise on CoderSlingo, including this one, is completely free — no account, sign-up, or payment required.
How many questions does this exercise have?
This exercise has 5 questions. Each one shows a real-world sentence or scenario with multiple-choice options and an explanation once you answer.
What happens after I answer a question?
You'll see immediate feedback showing whether your answer was correct, along with a short explanation of why — then a button to move to the next question, and a full results screen at the end.
Can I retry the exercise if I get questions wrong?
Yes. Once you reach the results screen, click "Try again" to reset your answers and go through the exercise from the start as many times as you like.
Do I need to create an account to take this exercise?
No account is needed. Your answers are scored in your browser during the session — nothing is saved to a server, so you can jump straight in.
Is my progress saved if I leave the page?
No — progress within an exercise resets if you navigate away or reload. Each exercise is short enough to complete in a few minutes in one sitting.
Are these vocabulary exercises connected to other topics?
Yes — this module shares real-world context with 14 other vocabulary modules. See "Related vocabulary" below to keep building a connected skill set.
How is this different from reading a glossary or blog article?
Exercises like this one are active recall drills — you have to choose the correct term or phrasing yourself, which builds retention faster than passively reading a definition.
Where can I find more vocabulary exercises?
Browse the full Vocabulary exercises hub for hundreds of modules covering Agile, DevOps, security, databases, architecture, and more — organised by IT role and skill.