Migrating React from version 18 to 19

React 19 was released on 25 April 2024 and it is based out of React 18. This release introduces major improvements and removes some features to enhance developer experience and application performance. Migrating is a straightforward approach, but you need to watch for removed features. In this blog, I share my experience in migrating React to version 19.

Key Features added in React 19

1. Optimized Concurrent Rendering:React introduced concurrent rendering in version 18. In React 19, they further improved it by scheduling algorithm dynamically to adapt user interactions.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />, { adaptiveScheduling: true });

2. New Hooks introduced

• • useActionState -> Update state based on the result of form submission.
  • useFormStatus -> Gives status information of the last form submission.
  • useOptimistic → Lets you  to optimistically update the UI.

3. Actions API: React introduced Actions to handle mutations and state updates. It acts as an async function that gets called on form submission.

Deprecations & removals to consider

• React removed String Refs. Use callback refs or createRef instead.
• createFactory, render, element.ref and ReactDom.hydrate were removed.
• React removed propTypes and defaultProps from package.

Step by step instructions for React 18 to 19 migration

Step1: Audit packages

Audit your package.json file and ensure it supports React 19. If not, upgrade the packages to the supported version.

Note: It is highly recommended to keep packages with the latest version.

Npm run audit

Step2: Update React version

npm install react@^19.0.0 react-dom@^19.0.0

Build an AI-First Enterprise

From early pilots to enterprise-wide deployment, our award-winning AI consulting and technical services help you build the right foundation, scale responsibly, and deliver meaningful business outcomes.

Learn More

Step3: Run Codemods

npx codemod@latest react/19/migration-recipe

Codemods will update the following

• Replace ReactDOM.render with createRoot or hydrateRoot.
• Convert String refs to callback refs or useRef.
• Remove legacy Context APIs (contextTypes, getChildContext).

Step4: Address breaking issues

• We used Material UI, where Grid2 was not supported. We switched from Grid2 to Grid.
• React removed String Ref, so we replaced it with createRef.
• We upgraded to the modern Context API like createContext and contextType.

Step5: Test and validate the application

Run the application and test the end-to-end flow. Look for performance, server-side rendering, lazy loading impacts as well.

Step6: Post migration cleans up

Update lint/eslint rules according to react 19.Remove unused imports and packages. Add dev notes for the breaking issues to faced/resolution took while migrating

Reference:

1. React 19 Upgrade Guide – React
2. Built-in React Hooks – React
3. React 18 to 19 Migration – Codemod.com