useDebugValue: a label only DevTools reads
Without DevTools open, the format function never runs. With React DevTools, select Cart and the hooks panel shows Cart: "2 items, total 270" next to the hook's name.
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
Cart rendered with 2 items