useId for labels and hints
Two instances, two separate sets of ids. Click each label: it focuses its own input. The exact format (_r_0_ in React 19.2) is an internal detail.
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
Password -> _r_0_-input described by _r_0_-hint
Confirm password -> _r_1_-input described by _r_1_-hint