Same ids on the server, prefixes for several roots
Server ids (capital R) are built from the tree path so hydration can reproduce them; ids made in a client-only root (small r) come from a counter shared by the whole page, which is why the chat root continues at 2. Never rely on either format.
useId makes unique, stable ids that match between server and browser, for connecting labels and ARIA attributes; useDebugValue labels your custom hooks in React DevTools; and React 19.2 has twenty built-in hooks in all, each with a clear job.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a reusable Checkbox component with a label and a hint text, connected with useId, and render it three times.
Make a RadioGroup component that renders three options; every instance must have its own name so two groups on one page don't interfere.
Explain it without notes
Why can't you hard-code ids in a reusable component, and how does useId solve it?
Why does useId exist instead of using a counter or Math.random()?
What does useDebugValue do, and when should you pass a format function?
Name the hooks React 19.2 provides for effects and say how they differ.
Preview
Console
Nothing logged yet.Expected console output
<p><label for="_R_1_">Name</label> <input id="_R_1_"/></p><p><label for="_R_2_">City</label> <input id="_R_2_"/></p>
_shop-r_0_ _shop-r_1_ _chat-r_2_ _chat-r_3_