React 19 introduces powerful new hooks that simplify common patterns. Let's explore them.
The use() Hook
Read promises and context directly in components:
function Comments({ commentsPromise }) {
// Suspense-compatible promise unwrapping
const comments = use(commentsPromise);
return comments.map((c) => <Comment key={c.id} {...c} />);
}
useFormStatus()
Get form submission state without prop drilling:
function SubmitButton() {
const { pending, data, method } = useFormStatus();
return (
<button disabled={pending}>{pending ? 'Submitting...' : 'Submit'}</button>
);
}
useOptimistic()
Optimistic UI updates made easy:
function TodoList({ todos }) {
const [optimisticTodos, addOptimistic] = useOptimistic(
todos,
(state, newTodo) => [...state, newTodo]
);
async function addTodo(formData) {
addOptimistic({ id: 'temp', text: formData.get('text') });
await saveTodo(formData);
}
return optimisticTodos.map((todo) => <Todo key={todo.id} {...todo} />);
}
useActionState()
Manage action state and errors:
function Form() {
const [state, formAction] = useActionState(submitForm, initialState);
return (
<form action={formAction}>
{state.error && <Error message={state.error} />}
<input name="email" />
<button>Submit</button>
</form>
);
}
React Compiler
Automatic memoization - no more manual useMemo and useCallback:
// Before: Manual memoization needed
const memoizedValue = useMemo(() => compute(a, b), [a, b]);
// After: Compiler handles it automatically
const value = compute(a, b); // Auto-optimized!
These new features make React 19 the most developer-friendly version yet.
Posted onreactwith tags: