Deprecation warnings, and a removal that stays silent
The two warnings are React 19.2's real development messages. The third problem prints nothing: Hello, ! on screen is the only clue, which is why you read the upgrade guide and run codemods instead of relying on warnings alone. Production builds print none of these.
React follows semantic versioning: patches fix bugs, minors add features, majors remove deprecated APIs after warning about them; you upgrade safely by reading the upgrade guide, moving to the last minor of your current major first, fixing every deprecation warning, running the official codemods, and keeping react, react-dom and @types/react in step.
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.
Rewrite this React 18 component for React 19 without changing what it shows: function Avatar({ size }) { return <img width={size} height={size} />; } Avatar.defaultProps = { size: 48 };
Write a small check that throws a clear error at startup if react and react-dom versions differ.
Explain it without notes
Explain semantic versioning and the caret and tilde ranges in package.json.
What are React's release channels and which should an app use?
Describe a safe process to upgrade a large app from React 18 to React 19.
Why must react and react-dom match, and what happens if two copies of React are installed?
Preview
Console
Nothing logged yet.Expected console output
props.ref works: true
Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.
element.ref still answers: true
OldTheme uses the legacy contextTypes API which was removed in React 19. Use React.createContext() with static contextType instead. (https://react.dev/link/legacy-context)
screen: Theme: undefined | Hello, ! | Hello, guest!