Vertex

Optimistic updates

Optimistic UI shows the expected result immediately and reconciles when the server answers. The interesting part is what happens when the server disagrees.

Lesson 4.38m 45sIntermediate7.9k students

Chapters

8:45
  1. 0:00Introduction
  2. 0:34What are optimistic updates
  3. 1:13Why optimistic updates are hard
  4. 2:05useOptimistic hook basics
  5. 6:38useOptimistic hook advanced

What this lesson covers

  • Render the expected state before the server confirms
  • Roll back cleanly when the action fails
  • Keep optimistic state scoped to the component that owns it

This lesson sits in Server Actions and Mutations, part of Next.js App Router in Depth. It assumes what came before it and leads directly into the next lesson in the module.

In this lesson you will

  • Render the expected state before the server confirms
  • Roll back cleanly when the action fails
  • Keep optimistic state scoped to the component that owns it

Resources

Previous lessonForms, validation, and error states4.2 · 16m 56s