ref as a prop and a ref callback with cleanup
TextField passes the ref prop straight to its input. When the box is removed React calls the returned cleanup, not the callback with null.
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
ref attached: box
focused: true
ref cleanup: stop observing