React useOptimistic Tutorial: Optimistic UI Complete Guide
React 19's useOptimistic lets you show the result before the server answers — and automatically rolls it back if the server disagrees. This 2026 tutorial walks through the mental model, three runnable patterns (like button, comment thread, todo delete), the useActionState + useFormStatus…
useOptimistic is not for making your app feel fast — it's for making lies reversible. That sounds like a joke, but it's the design philosophy of React 19's optimistic UI hook, and this react useOptimistic tutorial complete guide 2026 exists to make it stick. Every optimistic update is a lie you tell the user: "your like is saved," "your comment is posted," "that todo is deleted" — all before the server has confirmed a thing. Before React 19, you hand-rolled the state machine that kept those lies straight: temp IDs, manual rollbacks, races when two lies overlapped. useOptimistic exists so the framework holds the lie for you and takes it back automatically when the server disagrees. Speed is the side effect. Reversibility is the product. What you'll learn The useOptimistic mental model: real state vs. the optimistic overlay, and the Transition/Action contract Three runnable patterns: an optimistic like button, a comment thread with pending states, and an optimistic todo delete How to pair useOptimistic with useActionState and useFormStatus in React 19 forms A decision table: useOptimistic vs useActionState vs TanStack Query's onMutate vs manual useState Rollback and error handling: making automatic reverts visible to the user The four mistakes everyone makes (including the exact "outside a Transition or Action" error) and their fixes React useOptimistic tutorial complete guide 2026: the reversible-UI mental model The hook's signature is small: import { useOptimistic } from 'react'; const [optimisticState, addOptimistic] = useOptimistic( realState, // the server-confirmed state (currentState, action) => newState // how to compute the optimistic overlay ); realState is what the server knows. optimisticState is what the user sees:…