Instant Feedback Using useOptimistic
Apply optimistic UI updates for likes, comments, and toggles while the action resolves in the background.
The Latency Problem
When a user clicks a like button, the change has to travel to the server and back before the UI reflects it. On a slow network that delay feels broken.
The fix is optimistic UI: assume the action will succeed, update the screen instantly, and reconcile with the server once it responds. If the server fails, you roll back automatically.
React 19 (shipped with Next.js 15) gives you a dedicated hook for this: useOptimistic.
What useOptimistic Returns
useOptimistic takes your real state and an update function, and returns a temporary optimistic value plus a function to apply optimistic changes.
optimisticState— what you render right nowaddOptimistic(value)— queue an optimistic change
The signature is useOptimistic(state, (currentState, optimisticValue) => newState). The reducer-style function merges the optimistic value into the current state.
const [optimisticState, addOptimistic] = useOptimistic(
state,
(currentState, optimisticValue) => {
// return the new state to display optimistically
return { ...currentState, ...optimisticValue };
}
);All lessons in this course
- Progressive Enhancement with the form Action Prop
- Pending and Loading States with useFormStatus
- Field-Level Validation Errors with useActionState
- Instant Feedback Using useOptimistic