React 19: New Compiler, Actions, and What It Means for Your Apps

React 19 is the most significant update since hooks, introducing the React Compiler for automatic optimization and Actions for simpler data mutations.

The React Compiler

No more manual memoization! The compiler automatically optimizes your components:

// Before: Manual memoization
const MemoizedComponent = React.memo(({ items }) => {
  const filtered = useMemo(() => items.filter(x => x.active), [items]);
  const handleClick = useCallback(() => console.log(filtered), [filtered]);
  return <List items={filtered} onClick={handleClick} />;
});

// After: React 19 - compiler handles it
function Component({ items }) {
  const filtered = items.filter(x => x.active);
  const handleClick = () => console.log(filtered);
  return <List items={filtered} onClick={handleClick} />;
}

Actions

Actions simplify form handling and data mutations:

function UpdateProfile() {
  const [state, formAction, isPending] = useActionState(
    async (prevState, formData) => {
      const result = await updateProfile(formData);
      return result;
    },
    null
  );

  return (
    <form action={formAction}>
      <input name="name" />
      <button disabled={isPending}>
        {isPending ? "Saving..." : "Save"}
      </button>
    </form>
  );
}

use() Hook

Read promises and context conditionally:

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // Suspends until resolved
  return comments.map(c => <Comment key={c.id} {...c} />);
}