Optimistic UI updates for actions

What's really being asked

Whether you can trade certainty for responsiveness safely, which hinges entirely on a correct rollback path, not just the happy case.

The full answer

Optimistic UI updates the interface immediately, assuming the mutation will succeed, so interactions feel instant despite network latency. The essential steps are: capture the current state as a snapshot, apply the optimistic change locally, issue the server request, and then reconcile. On success you confirm, optionally replacing optimistic values with authoritative server data. On failure you restore the snapshot and surface a brief, non-blocking error so the user understands the action did not stick. React's useOptimistic hook formalizes this by deriving optimistic state that automatically reverts when the underlying action settles, and Apollo and React Query offer optimisticResponse and onMutate with rollback hooks.

The mistakes people make

Applying the optimistic change with no rollback, so a failed request leaves a like that the server never recorded; not snapshotting prior state so revert is impossible; double-counting when a slow real response also increments; or blocking the UI with a spinner, which defeats the purpose.

What usually comes next

How does useOptimistic differ from manual useState rollback? How do you reconcile the optimistic value with the server's authoritative count? How do you debounce rapid toggles?

A concrete example

Tapping like immediately flips liked to true and increments the count from 41 to 42, then POSTs to the server. If the POST succeeds, the optimistic state stands or is replaced by the returned count. If it fails, the code restores liked to false and the count to 41 and shows 'Couldn't like, try again'. With useOptimistic, the optimistic 42 reverts automatically once the failed action resolves, without manual snapshot bookkeeping.