Optimistic updates pattern in NextJS - Step-by-Step Execution

Concept Flow - Optimistic updates pattern

User triggers update

↓

Update UI immediately

↓

Send update request to server

↓

Server responds

↓

Keep UI

This flow shows how the UI updates right away when the user acts, then waits for the server response to confirm or undo the change.

Execution Sample

NextJS

const [items, setItems] = useState(['apple', 'banana']);

async function addItem(newItem) {
  const oldItems = items;
  setItems([...items, newItem]);
  try {
    await fetch('/api/add', { method: 'POST', body: JSON.stringify({ item: newItem }) });
  } catch {
    setItems(oldItems); // revert on failure
  }
}

This code adds an item to the list immediately, then tries to save it on the server. If saving fails, it reverts the list.

Execution Table

Step	Action	UI State (items)	Server Request	Server Response	Resulting UI State
1	User clicks add 'orange'	['apple', 'banana']	No	No	['apple', 'banana']
2	UI updates immediately	['apple', 'banana', 'orange']	No	No	['apple', 'banana', 'orange']
3	Send POST request to /api/add	['apple', 'banana', 'orange']	POST /api/add {item: 'orange'}	Pending	['apple', 'banana', 'orange']
4	Server responds success	['apple', 'banana', 'orange']	POST /api/add {item: 'orange'}	Success	['apple', 'banana', 'orange']
5	No UI change needed	['apple', 'banana', 'orange']	No	No	['apple', 'banana', 'orange']
6	User clicks add 'grape'	['apple', 'banana', 'orange']	No	No	['apple', 'banana', 'orange']
7	UI updates immediately	['apple', 'banana', 'orange', 'grape']	No	No	['apple', 'banana', 'orange', 'grape']
8	Send POST request to /api/add	['apple', 'banana', 'orange', 'grape']	POST /api/add {item: 'grape'}	Pending	['apple', 'banana', 'orange', 'grape']
9	Server responds failure	['apple', 'banana', 'orange', 'grape']	POST /api/add {item: 'grape'}	Failure	['apple', 'banana', 'orange']
10	UI reverts to old state	['apple', 'banana', 'orange']	No	No	['apple', 'banana', 'orange']

💡 Execution stops after server response and UI state is confirmed or reverted.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 7	After Step 9	Final
items	['apple', 'banana']	['apple', 'banana', 'orange']	['apple', 'banana', 'orange']	['apple', 'banana', 'orange', 'grape']	['apple', 'banana', 'orange']	['apple', 'banana', 'orange']

Key Moments - 3 Insights

Why does the UI update before the server confirms the change?

The UI updates immediately to give instant feedback to the user, as shown in steps 2 and 7 of the execution_table. This is the core of optimistic updates.

What happens if the server rejects the update?

If the server responds with failure (step 9), the UI reverts to the previous state (step 10), undoing the optimistic change.

Why do we keep a copy of the old state?

We keep the old state to revert the UI if the server rejects the update, as seen in the catch block in the code and steps 9-10 in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table at step 4. What is the UI state after the server responds successfully?

A ['apple', 'banana', 'orange']

B ['apple', 'banana']

C ['apple', 'banana', 'orange', 'grape']

D []

💡 Hint

Check the 'Resulting UI State' column at step 4 in the execution_table.

At which step does the UI revert to the old state after a failed server response?

A Step 9

B Step 10

C Step 7

D Step 5

💡 Hint

Look for the step where the 'Resulting UI State' changes back to the previous list in the execution_table.

If the server always succeeds, how would the variable_tracker change?

A The 'items' variable would revert after each update.

B The 'items' variable would stay the same as start.

C The 'items' variable would never revert and keep growing.

D The 'items' variable would be empty.

💡 Hint

Check how 'items' changes after successful and failed responses in variable_tracker.

Concept Snapshot

Optimistic updates pattern:
- Update UI immediately on user action
- Send server request in background
- If server succeeds, keep UI as is
- If server fails, revert UI to old state
- Improves user experience by reducing wait time

Full Transcript

The optimistic updates pattern lets the UI change right away when a user acts, without waiting for the server. This makes the app feel faster and more responsive. The code first updates the UI state, then sends a request to the server. If the server confirms success, the UI stays the same. If the server fails, the UI reverts to the previous state. This pattern requires keeping a copy of the old state to revert if needed. The execution table shows each step: user action, UI update, server request, server response, and final UI state. The variable tracker follows the list of items as it changes. Key moments include understanding why the UI updates before server confirmation and how failures are handled. The visual quiz tests understanding of these steps. This pattern is common in Next.js apps to improve user experience.