DEV Community

Jay Sarvaiya
Jay Sarvaiya

Posted on

React 19 Migration Guide: How to Upgrade from React 18

#webdev #javascript #beginners #react

React 19 is here bringing automatic memoization, async-safe context, Actions for forms, stable server components, and smarter asset loading. If you’re on React 18, upgrading is worth it.

But how do you migrate safely without breaking your app? Here’s a step-by-step React 19 migration guide with pitfalls to avoid.

Step 1: Update Dependencies

In your project root, update React and ReactDOM to v19:

npm install react@19 react-dom@19
Enter fullscreen mode Exit fullscreen mode

Or with Yarn:

yarn add react@19 react-dom@19
Enter fullscreen mode Exit fullscreen mode

If you’re using Next.js or Remix, make sure you’re on a version that supports React 19 (Next.js 15+).

Step 2: Remove Unnecessary Memoization

React 19 includes the React Compiler, which automatically memoizes components.

You can safely remove some React.memo, useMemo, and useCallback calls that were only there for performance reasons.

Before (React 18):

const List = React.memo(({ items }) => { return items.map(i => <li key={i}>{i}</li>); });
Enter fullscreen mode Exit fullscreen mode

After (React 19):

function List({ items }) { return items.map(i => <li key={i}>{i}</li>); }
Enter fullscreen mode Exit fullscreen mode

Cleaner code, same performance.

Tip: Don’t remove memoization everywhere blindly — keep it where you want to prevent prop-based re-renders.

Step 3: Refactor Forms to Use Actions

React 19 introduces form actions, making forms more declarative.

Before (React 18):

function CommentForm() { async function handleSubmit(e) { e.preventDefault(); await fetch("/api/comment", { method: "POST", body: new FormData(e.target) }); } return <form onSubmit={handleSubmit}>...</form>; }
Enter fullscreen mode Exit fullscreen mode

After (React 19):

function CommentForm() { async function postComment(formData) { "use server"; await db.comments.create(formData); } return ( <form action={postComment}> <input name="text" /> <button type="submit">Post</button> </form> ); }
Enter fullscreen mode Exit fullscreen mode

Cleaner, easier to maintain, and built-in server support.

Step 4: Use Async Context with use()

React 18 context wasn’t always safe with Suspense + async rendering.

Before (React 18):

const ThemeContext = createContext("light"); const theme = useContext(ThemeContext);
Enter fullscreen mode Exit fullscreen mode

After (React 19):

const ThemeContext = createContext("light"); const theme = use(ThemeContext); // async-safe 🎉
Enter fullscreen mode Exit fullscreen mode

Step 5: Embrace Server Components (if using Next.js/Remix)

React 19 stabilizes Server Components, which means:

  • Smaller client bundles
  • Faster SSR (server-side rendering)
  • Cleaner server-side data fetching

If you’re using Next.js 15, start moving non-interactive components to the server side.

Example:

// React 19 server component export default async function UserList() { const users = await db.users.getAll(); return users.map(u => <p key={u.id}>{u.name}</p>); }
Enter fullscreen mode Exit fullscreen mode

Step 6: Check Asset Loading

React 19 improves how assets (fonts, styles, scripts) load. If you were manually preloading with <link>, you might be able to simplify your setup.

Migration Tip: Run Lighthouse or Web Vitals before and after upgrading to verify improvements.

Step 7: Test Thoroughly

Even though React 19 is backward-compatible with most React 18 code, test thoroughly:

  • Run unit tests & integration tests
  • Check Suspense + transitions behavior
  • Verify forms & server actions
  • Check context usage

Migration Checklist

  • Update React + ReactDOM to v19
  • Clean up unnecessary memoization
  • Refactor forms to Actions where possible
  • Switch to use() for async context
  • Adopt Server Components in Next.js/Remix apps
  • Validate asset loading improvements
  • Test all components & flows

Final Thoughts

Migrating from React 18 → React 19 is mostly smooth:

  • Your existing React 18 code will still work
  • New features reduce boilerplate
  • Server-first workflows are easier than ever

If you’re already using React 18, upgrading to 19 is a no-brainer — especially if you’re on Next.js 15 or planning to use server components.

Have you started migrating your app to React 19? Share your experience in the comments — what worked, what broke, and what you love so far!

Would you like me to also prepare a “React 19 Best Practices” article (showing how to write modern, clean code using new features) as a follow-up in your series?

Top comments (0)