Optimistic updates allow your UI to respond instantly to user actions, assuming the server request will succeed before it actually finishes.
Interactive Simulation Engine
Optimistic UI Simulation
Instant feedback vs. Server truth
The User Sees (Optimistic)
10
LikesThe Server Knows (Truth)
10
In Sync
The Logic: useOptimistic allows you to update the UIinstantly while the real server action happens in the background. If the server fails, React automatically rolls the UI back to the correct state.
Executable Code Workbench
page.tsx
Live Code Editor1import { useOptimistic } from 'react'
2
3export function LikeButton({ initialLikes }) {
4 const [optimisticLikes, addOptimisticLike] = useOptimistic(
5 initialLikes,
6 (state, newLike) => state + 1
7 )
8
9 return (
10 <button onClick={() => addOptimisticLike(1)}>
11 {optimisticLikes} Likes
12 </button>
13 )
14}Mental Model
It's like checking an item off your to-do list immediately. You don't wait for the pen to finish drying to know you've done it!
Why This Exists
To make applications feel incredibly fast and responsive. Users hate waiting for 'loading spinners' after clicking a simple button.
Critical Note
"Developers often confuse this pattern with traditional client React. Use the Live Code Workbench above to simulate execution."