Lesson 3.3

Optimistic updates with useOptimistic

An optimistic update renders the outcome the moment the user acts, then reconciles with whatever the server actually returns.

9mIntermediate10.6k students

Overview

Trading certainty for responsiveness

An optimistic update renders the outcome the moment the user acts, then reconciles with whatever the server actually returns. For a like button or a todo checkbox, that removes a round trip from the interaction entirely.

The hook keeps the optimistic value only until the action settles, so a failure reverts to the real state without any rollback code of your own. What you do owe the user is a message — silently reverting a change looks like a bug.

Reserve the technique for actions that almost always succeed and are cheap to undo. Optimistically showing a completed payment is not responsiveness, it is lying.

In this lesson you will:

  • Show the result before the server confirms it
  • Roll back cleanly when the write fails
  • Decide which actions deserve optimism

Resources

Previous Lesson
Next Lesson
Optimistic updates with useOptimistic — Next.js for Production — Vertex