useOptimistic in React
From the React Design Patterns cheat sheet · React 19 Actions & Forms · verified Jul 2026
useOptimistic
Show instant UI feedback while async operations are still in flight
jsx
const [optimisticTodos, addOptimisticTodo] = useOptimistic(
todos,
(state, newTodo) => [...state, { ...newTodo, pending: true }]
);
async function handleAdd(text) {
addOptimisticTodo({ id: 'temp', text });
await api.addTodo({ text });
}💡 useOptimistic shows instant feedback then reverts automatically if the action fails
⚡ Must be called inside startTransition or a form action - React enforces this
📌 Add a pending flag in the optimistic state to visually distinguish unsaved items
🟢 No manual rollback needed - React reconciles when the real state updates
useOptimisticoptimistic-uireact-19