React 19 cheatsheet

React 19: React 19 features

4 common React 19 tasks.

Handle a form action

Track the result and pending state of a form action.

const [error, submitAction, isPending] = useActionState(async (prev, formData) => {
  return await save(formData);
}, null);

Show the expected result immediately while the request is in flight.

const [optimisticTodos, addOptimistic] = useOptimistic(todos, (state, todo: Todo) => [...state, todo]);

use can read a promise during render, suspending until it resolves, and can be called conditionally.

const user = use(userPromise);

Function components accept ref as a normal prop, so forwardRef is no longer needed.

function Input({ ref, ...props }: React.ComponentProps<"input">) {
  return <input ref={ref} {...props} />;
}