Optimistic UI
Updating the screen the instant someone acts, before the server confirms anything, then quietly putting it back if the request fails.
See it
What it is
Optimistic UI bets that the request will succeed. You apply the change to local state the moment someone acts (the heart fills, the row vanishes, the message lands in the thread) and fire the mutation in the background. React Query's 'onMutate', SWR's 'optimisticData', and React's 'useOptimistic' hook all exist to make this the easy path.
Reach for it on frequent, low-stakes actions that almost always succeed: likes, toggles, reordering, adding a todo, sending a chat message. Skip it for payments, irreversible deletes, and anything where being wrong for two seconds costs real money or real trust. There a plain pending state is the honest answer.
The gotcha is the rollback. Every optimistic update needs a defined failure path: restore the previous state, say what happened, and hand the action back. Half-built optimistic UI is worse than a spinner, because the app confidently lies and then quietly forgets. Watch server-generated values too (ids, timestamps, computed totals), since your predicted row does not have them yet.
Ask AI for it
Make this action optimistic. On click, apply the change to local state immediately and render the new value with no spinner and no dimming, then send the mutation in the background. Use React Query 'useMutation' with 'onMutate' to cancel in-flight queries, snapshot the current cache, and write the predicted result; in 'onError' restore the snapshot and show a short toast with a Retry button; in 'onSettled' invalidate the query so the server value wins. Make the optimistic item visually identical to a confirmed one, and disable the control only while a conflicting second action would break ordering.