React 19: What's New and How to Upgrade

React 19 is a major release packed with new features, performance improvements, and important breaking changes. Here’s a comprehensive guide to what’s new, what’s changed, and how to upgrade smoothly.

🚀 Major New Features

1. Actions and Async Transitions

• startTransition now supports async functions (Actions), allowing you to perform async work (like fetches) inside transitions.
• useActionState is a new hook for managing state and pending status of actions.
• useOptimistic lets you optimistically update UI while a transition is in progress.

import { startTransition, useActionState, useOptimistic } from 'react';

function MyForm() {
  const [state, submitAction, isPending] = useActionState(async (prev, formData) => {
    const result = await fetch('/api/submit', { method: 'POST', body: formData });
    return await result.json();
  }, {});

  return (
    <form action={submitAction}>
      {/* form fields */}
      <button type="submit" disabled={isPending}>Submit</button>
    </form>
  );
}

2. use API

• The new use API allows you to read promises or context directly in render.
• If you pass a promise, the component will suspend until it resolves.

function UserProfile({ userPromise }) {
  const user = use(userPromise);
  return <div>{user.name}</div>;
}

3. Ref as a Prop

• You can now pass refs as props directly, removing the need for forwardRef in many cases.

4. Suspense Improvements

• Sibling pre-warming: Suspense boundaries now pre-warm siblings for faster loading.
• Better hydration and error handling.

5. Native Form Actions

• <form action> and useFormStatus provide native support for form actions and status tracking.

6. Server Components

• React Server Components are now stable, enabling full-stack React apps.

7. Document Metadata and Stylesheets

• React now supports rendering metadata and stylesheets directly into the document head.

⚠️ Breaking Changes

• Legacy Context API removed: Use the modern context API.
• String refs removed: Use callback refs instead.
• propTypes and defaultProps for functions removed: Use TypeScript or default parameters.
• ReactDOM.render, ReactDOM.hydrate, unmountComponentAtNode, findDOMNode removed: Use createRoot and hydrateRoot.
• New JSX transform required: Update your build tools if needed.
• UMD builds removed: Use ESM/CDN for script tags.
• IE11 support removed.

🛠️ Upgrade Guide

1. Upgrade to React 18.3.1 first to see deprecation warnings.
2. Refactor deprecated APIs: Migrate away from legacy context, string refs, and other removed features.
3. Update JSX transform: Make sure your tooling supports the new JSX transform.
4. Test thoroughly: Pay special attention to forms, refs, Suspense, and error boundaries.
5. Check dependencies: Ensure third-party libraries are compatible with React 19.
6. Use codemods for TypeScript: Run npx types-react-codemod@latest preset-19 ./src to update deprecated types.

💡 Best Practices

• Use the new hooks (useActionState, useOptimistic, use) for async and concurrent UI.
• Leverage native form actions and Suspense for better UX.
• Migrate away from all removed APIs before upgrading.
• Monitor your app for hydration and Suspense errors after upgrade.

📝 Example: Optimistic UI with useOptimistic

import { useOptimistic, startTransition } from 'react';

function LikeButton({ postId }) {
  const [likes, setLikes] = useOptimistic(0);

  const handleLike = () => {
    startTransition(() => {
      setLikes(likes + 1); // Optimistically update
      // Then send to server
      fetch(`/api/like/${postId}`, { method: 'POST' });
    });
  };

  return <button onClick={handleLike}>Like ({likes})</button>;
}

❓ FAQ

• Do I need to rewrite my app? No, but you must migrate away from removed APIs.
• Is React 19 faster? Yes, especially for concurrent and async UI.
• What about TypeScript? Some types are removed; use the codemod to update.
• What if a dependency isn’t ready? Wait to upgrade until all critical dependencies support React 19.

📚 Resources

• React 19 Release Notes
• React 19 Upgrade Guide
• React Server Components

React 19 is a huge step forward for modern web apps. Upgrade today to take advantage of the latest features and performance improvements!