Root error callbacks and a hydration mismatch
With callbacks set, React calls them instead of logging to the console itself. The hydration mismatch is recoverable: React threw away the server text and rendered the client's. (The first line of each message is logged here; a real reporter sends the whole error.)
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
caught: Widget crashed | stack has component: true
recoverable: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used: | stack has component: true
page now: Rendered at 10:31