React 19 Features Explained: New Hooks, Compiler & Server Components

A complete breakdown of React 19's new features, including useActionState, useFormStatus, the React Compiler, Server Components, and how they improve your development workflow.

React 19 is a major release that introduces powerful new features designed to simplify form handling, optimize performance automatically, and enable server-side rendering patterns. Whether you're building a small app or scaling a large product, these features address real pain points developers face every day. This guide walks you through each major addition, explains why it matters, and shows you how to use it in your projects.

React 19 is the latest major version of the React JavaScript library, released to simplify common development tasks and improve app performance without extra work. Previous React versions required developers to write boilerplate code for form handling, manage loading states manually, and optimize re-renders by hand. React 19 automates much of this, letting you focus on building features instead of managing complexity.

The release includes five major pillars: new hooks for forms, a compiler that optimizes code automatically, Server Components for server-side rendering, improved error handling, and better support for third-party libraries. Each feature solves a specific problem that developers encounter regularly.

useActionState is a new hook that replaces the older useTransition hook for form handling. It manages the entire lifecycle of a form submission—from sending data to the server, to handling the response, to updating the UI—in one clean function. Before React 19, you had to manually track loading state, handle errors, and update form fields after submission.

The hook takes two arguments: an action function (what happens when the form submits) and an initial state. It returns the current state, a function to trigger the action, and a boolean showing if the action is pending. This pattern is much simpler than managing multiple useState calls for different parts of the submission process.

import { useActionState } from 'react';

async function submitForm(prevState, formData) {
  const email = formData.get('email');
  const response = await fetch('/api/subscribe', {
    method: 'POST',
    body: JSON.stringify({ email }),
  });
  const data = await response.json();
  return data;
}

export default function NewsletterForm() {
  const [state, formAction, isPending] = useActionState(
    submitForm,
    { message: '' }
  );

  return (
    <form action={formAction}>
      <input type="email" name="email" required />
      <button disabled={isPending}>
        {isPending ? 'Subscribing...' : 'Subscribe'}
      </button>
      {state.message && <p>{state.message}</p>}
    </form>
  );
}

In this example, the form automatically disables the button while submitting, displays the server response, and handles errors—all without writing extra state management code. The action function receives the previous state and form data, making it easy to validate and process user input.

useFormStatus is a companion hook that lets child components know if a form is currently submitting. This is useful when you want to disable multiple buttons, show loading spinners, or update UI elements in different parts of your component tree without passing props down manually.

The hook returns an object with a pending boolean and the form data being submitted. You can use this to show loading states in buttons, disable inputs, or display progress indicators anywhere inside the form—without the parent component needing to pass state down.

import { useFormStatus } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Saving...' : 'Save Changes'}
    </button>
  );
}

export default function ProfileForm() {
  async function updateProfile(formData) {
    await fetch('/api/profile', {
      method: 'POST',
      body: formData,
    });
  }

  return (
    <form action={updateProfile}>
      <input type="text" name="name" />
      <SubmitButton />
    </form>
  );
}

Here, the SubmitButton component doesn't receive any props but still knows the form is submitting because useFormStatus reads the context from the parent form. This pattern keeps components decoupled and reduces prop drilling.

The React Compiler is a new build-time tool that automatically optimizes your React code without you writing useMemo, useCallback, or other manual optimization hooks. It analyzes your component code and adds memoization only where it's actually needed, eliminating unnecessary re-renders.

In older React versions, developers had to manually wrap expensive computations with useMemo and callback functions with useCallback to prevent re-renders. This added complexity and was easy to get wrong. The React Compiler does this analysis for you, making your code faster and simpler at the same time.

To enable the compiler, you add it to your build configuration. If you're using Next.js, you can enable it in next.config.js. For other setups, you'll need to configure it in your bundler (Webpack, Vite, etc.). Once enabled, the compiler runs during the build process and transforms your code automatically.

// next.config.js
module.exports = {
  experimental: {
    reactCompiler: true,
  },
};

The compiler is smart enough to understand which values are stable and which change frequently. It won't memoize something that changes every render, and it will memoize expensive operations that don't need to recalculate. This means your app gets faster without the mental overhead of deciding when to use optimization hooks.

Server Components are React components that run only on the server, not in the browser. They let you access databases, APIs, and secrets directly without exposing them to the client. This is a fundamental shift in how you structure React apps, moving data fetching and processing to the server where it's safer and faster.

Before Server Components, all React code ran in the browser, which meant you had to fetch data on the client side, send sensitive API keys to the browser, and manage loading states for every data request. Server Components eliminate this problem by letting you fetch data on the server and send only the rendered HTML to the browser.

// app/posts/page.tsx (Server Component by default in Next.js 13+)
import { db } from '@/lib/database';

export default async function PostsList() {
  // This code runs on the server only
  const posts = await db.posts.findMany();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

In this example, the database query runs on the server during the build or request time, and only the rendered list is sent to the browser. The browser never sees the database connection string or query logic. You can mix Server Components with Client Components (marked with 'use client') to get the best of both worlds.

• Forgetting to mark components with 'use client' when they need browser APIs. Server Components can't use useState, useEffect, or browser-only features like localStorage.
• Using useActionState without an async action function. The hook expects a function that returns a promise or uses async/await.
• Not disabling form inputs during submission. Always use the pending state from useFormStatus or useActionState to prevent duplicate submissions.
• Trying to use Server Components in older React setups. Server Components require a framework like Next.js 13+ that supports them.
• Mixing Server and Client Components incorrectly. You can pass Server Components as children to Client Components, but not the other way around.
• Assuming the React Compiler will fix all performance issues. It optimizes re-renders, but doesn't solve algorithmic inefficiencies or large data structures.
• Not testing form submissions with slow networks. Use browser DevTools to throttle the network and verify your loading states work correctly.

Beyond the major features, React 19 includes several smaller improvements that make development smoother. The ref prop is now a regular prop instead of a special case, meaning you can pass refs directly to components without using forwardRef. This simplifies component APIs and reduces boilerplate.

Error boundaries have been improved to catch more types of errors and provide better error messages. Context is now easier to use with a new createContext API that simplifies the provider pattern. Hydration errors (mismatches between server and client HTML) are now caught earlier and reported more clearly.

React 19 also improves support for third-party libraries by making it easier to integrate with non-React code. The new use() hook lets you unwrap promises and context values in a cleaner way, and async components are now fully supported for server-side rendering scenarios.

Upgrading to React 19 is straightforward if you're on React 18. Start by updating your package.json to the latest version of React and React DOM, then run your tests and check for any deprecation warnings. Most code will work without changes because React 19 is backward compatible.

npm install react@19 react-dom@19

After upgrading, check your build output for any warnings. If you're using TypeScript, update your type definitions as well. Then gradually adopt the new features in your codebase—start with useActionState for forms, then explore Server Components if you're using a framework like Next.js.

If you're on an older version of React (16 or 17), you'll need to upgrade to React 18 first, then to React 19. The React team provides migration guides for each major version on their official documentation.

Here are answers to common questions about React 19 features and how to use them.

No. React 19 is backward compatible, so your existing code will continue to work. You can adopt new features gradually—start with useActionState for forms, then explore Server Components and the React Compiler when you're ready. There's no pressure to use everything at once.

Server Components require framework support. Next.js 13+ has built-in support, but other frameworks like Remix, Astro, and others are adding support. If you're using a custom setup, you'll need to implement the necessary infrastructure yourself, which is complex. For most projects, using a framework with built-in Server Component support is the easiest path.

The React Compiler optimizes re-renders, which can provide noticeable improvements for apps with many components or complex component trees. However, it won't fix fundamental performance issues like fetching too much data, rendering huge lists without virtualization, or inefficient algorithms. Use it as part of a broader performance strategy, not as a silver bullet.

useTransition still exists and works in React 19, but useActionState is the recommended approach for form submissions because it's simpler and handles more cases automatically. useTransition is still useful for non-form async operations where you need to track pending state without a form context.

Your action function should return an object with error information if something goes wrong. The returned state is then available in your component, and you can display error messages to the user. You can also throw errors, which will be caught by error boundaries.

async function submitForm(prevState, formData) {
  const email = formData.get('email');
  
  if (!email.includes('@')) {
    return { error: 'Invalid email address' };
  }
  
  try {
    const response = await fetch('/api/subscribe', {
      method: 'POST',
      body: JSON.stringify({ email }),
    });
    
    if (!response.ok) {
      return { error: 'Subscription failed' };
    }
    
    return { success: true, message: 'Subscribed!' };
  } catch (err) {
    return { error: 'Network error' };
  }
}

Start by upgrading to React 19 and running your existing tests. If you have forms in your app, refactor one of them to use useActionState and useFormStatus to see how much simpler the code becomes. If you're using Next.js, experiment with Server Components by converting a data-fetching component to a Server Component and removing the useEffect hook.

Enable the React Compiler in your build configuration and measure the performance impact using browser DevTools. Check the React DevTools Profiler to see which components are re-rendering and verify that the compiler is optimizing them correctly.

Read the official React 19 documentation and try building a small project that uses multiple new features together. This hands-on experience will help you understand when and how to use each feature in your own projects. React 19 is designed to make development faster and more enjoyable—take time to explore what works best for your team's workflow.