Custom elements get real properties
stars exists as a property on the element, so React set it as a number. label has no property, so it became an attribute. React 18 would have set stars="3" as a string attribute.
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
property stars: 3 (number)
attribute stars: null
attribute label: Quality
text: ★★★ (Quality)