React 19 Features: Complete Guide to the Latest Updates

1. Server Components (Stable)

React Server Components allow you to render components on the server, reducing JavaScript bundle size and improving initial load times. Components marked with 'use server' run exclusively on the server.

// Server Component
async function ServerComponent() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  
  return <div>{json.title}</div>;
}

2. Actions (Form Handling Revolution)

React Actions simplify form handling and data mutations. You can now use async functions directly in forms, with automatic loading states and error handling.

'use client';

import { useActionState } from 'react';

async function submitForm(prevState, formData) {
  const name = formData.get('name');
  // Process form data
  return { message: `Hello, ${name}!` };
}

function MyForm() {
  const [state, formAction] = useActionState(submitForm, null);
  
  return (
    <form action={formAction}>
      <input name="name" />
      <button type="submit">Submit</button>
      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

3. New Hooks: use() and useOptimistic()

React 19 introduces powerful new hooks for better data handling and optimistic updates. The use() hook unwraps promises and context values, while useOptimistic() enables instant UI updates.

import { use, useOptimistic } from 'react';

function Component() {
  const promise = fetch('/api/data').then(r => r.json());
  const data = use(promise); // Unwrap promise
  
  const [optimisticState, addOptimistic] = useOptimistic(
    todos,
    (state, newTodo) => [...state, { ...newTodo, pending: true }]
  );
  
  return <div>{data.title}</div>;
}

4. Improved Performance

React 19 includes significant performance improvements including better compiler optimizations, reduced re-renders, and faster hydration. The new compiler automatically optimizes your code, reducing the need for manual optimizations like React.memo in many cases.

5. Enhanced Developer Experience

Better TypeScript support, improved error messages, and new DevTools features make React 19 a joy to work with. The new <Suspense> improvements allow for more granular loading states.

Upgrading from React 18

Most React 18 code works in React 19 without changes. However, some deprecated features have been removed:

• ReactDOM.render has been removed (use createRoot)
• String refs are no longer supported (use useRef hook)
• Some legacy context APIs have been deprecated

Example: Building a Todo App with Actions

'use client';

import { useActionState, useOptimistic } from 'react';

async function addTodo(prevState, formData) {
  const todo = formData.get('todo');
  await fetch('/api/todos', {
    method: 'POST',
    body: JSON.stringify({ text: todo }),
  });
  return { success: true };
}

export function TodoForm({ todos }) {
  const [state, formAction] = useActionState(addTodo, null);
  const [optimisticTodos, addOptimistic] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );

  return (
    <div>
      <form
        action={async (formData) => {
          const todo = { id: Date.now(), text: formData.get('todo') };
          addOptimistic(todo);
          formAction(formData);
        }}
      >
        <input name="todo" />
        <button type="submit">Add</button>
      </form>
      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}