<Context> as a provider
No .Provider. The inner provider overrides the outer one, so the second badge always sees sepia. Both badges re-render on Switch because their parent App re-rendered.
React 19 removes everyday friction: function components receive ref as a normal prop, ref callbacks can return a cleanup function, <Context value> is a provider, hydration errors show one message with a diff, custom elements get properties instead of strings, and createRoot takes error reporting callbacks.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Convert a forwardRef SearchBox to React 19 and focus it from a parent button.
Write a ref callback that adds a keydown listener to a div and removes it in the cleanup.
Explain it without notes
How do you pass a ref to a function component in React 19, and what changed from React 18?
What do ref cleanup functions add, and how do they change the null call?
What do onCaughtError, onUncaughtError and onRecoverableError receive and when are they called?
How does React 19 handle props on custom elements?
Preview
Console
Nothing logged yet.Expected console output
Badge sees dark
Badge sees sepia
Badge sees light
Badge sees sepia