React 19: What Developers Need to Know

React 19 represents the most significant update since hooks changed how we write components. After building three production applications with the release candidate, I’m convinced this will transform how we think about React development.

My Experience

I was skeptical when React 19 was announced. React 18’s concurrent features took years to fully understand and use correctly. But after migrating a large dashboard application, I can say React 19 feels like the version React always wanted to be.

The biggest change isn’t any single feature—it’s how features combine. Actions integrate with server components. use() integrates with Suspense. The compiler optimizes what we were manually optimizing. Together, they simplify code while improving performance.

Let me walk you through what matters for your daily work.

The use() Hook: Game Changer

The use() hook suspends on promises, making async data handling declarative:

import { use } from 'react';

function UserProfile({ userPromise }) {
  const user = use(userPromise);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

// In parent - data fetching stays with data
function ProfilePage({ params }) {
  const userPromise = fetchUser(params.id);

  return (
    <Suspense fallback={<Skeleton />}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

The key insight: use() integrates promises directly into the component render flow. No more useEffect + useState juggling.

Using use() with Context

function ThemedButton() {
  const theme = use(ThemeContext); // Works with promises now!

  return (
    <button className={theme.button}>
      Click me
    </button>
  );
}

Actions: Form Handling Reinvented

Actions transform how we handle form submissions:

'use client';

import { useActionState, useTransition } from 'react';

async function submitForm(prevState, formData) {
  const name = formData.get('name');
  const email = formData.get('email');

  // Server action (can run on server)
  const result = await createUser({ name, email });

  if (result.error) {
    return { error: result.error };
  }

  return { success: true };
}

function SignupForm() {
  const [state, action, isPending] = useActionState(submitForm, null);
  const [isNavigating, startNavigation] = useTransition();

  if (state?.success) {
    return <SuccessMessage />;
  }

  return (
    <form action={action}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />

      {state?.error && <p className="error">{state.error}</p>}

      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting...' : 'Sign Up'}
      </button>
    </form>
  );
}

Server Actions

Define server actions that run on the server but can be called from client:

// app/actions.ts
'use server';

export async function createUser(data: { name: string; email: string }) {
  const user = await db.user.create({ data });

  revalidatePath('/users');
  redirect(`/users/${user.id}`);

  return { success: true };
}

The React Compiler: Automatic Optimization

The compiler analyzes your code and automatically memoizes computations:

// Before: Manual optimization
function ExpensiveComponent({ items, filter }) {
  const filteredItems = useMemo(
    () => items.filter(item => item.category === filter),
    [items, filter]
  );

  return <ul>{filteredItems.map(item => <Item key={item.id} item={item} />)}</ul>;
}

// After: Compiler handles this automatically
function ExpensiveComponent({ items, filter }) {
  // Compiler automatically memoizes!
  const filteredItems = items.filter(item => item.category === filter);

  return <ul>{filteredItems.map(item => <Item key={item.id} item={item} />)}</ul>;
}

useOptimistic: Instant Feedback

'use client';

import { useOptimistic } from 'react';

function CommentsList({ comments }) {
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (state, newComment) => [...state, newComment]
  );

  async function addComment(formData) {
    const comment = { text: formData.get('comment'), id: Math.random() };

    // Optimistically update UI immediately
    addOptimisticComment(comment);

    // Then sync with server
    await submitComment(comment);
  }

  return (
    <form action={addComment}>
      {optimisticComments.map(c => (
        <Comment key={c.id} text={c.text} pending={c.id >= Math.random()} />
      ))}
      <input name="comment" />
      <button type="submit">Add Comment</button>
    </form>
  );
}

New APIs Worth Knowing

• useFormStatus — Access pending state in any component in the form tree
• useFormAction — Get the form’s action for use in nested components
• useDeferredValue — Now supports custom equality function for objects

What Students Should Do Next

1. Try React 19 in a new project — The new patterns feel different, so start fresh
2. Experiment with server actions — They’re a paradigm shift worth experiencing
3. Understand use() before diving deeper — It connects everything in React 19

React 19 isn’t just incremental improvements—it’s a new mental model for React development. The best time to learn was yesterday. The second best time is now.