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

Concept Flow - Optimistic state updates

User triggers update

↓

Update UI state immediately

↓

Send update request to server

↓

Server responds

↓

Keep UI

The UI updates right away when the user acts, then waits for the server. If the server says no, the UI goes back.

Execution Sample

NextJS

const [count, setCount] = useState(0);

async function increment() {
  setCount(prevCount => prevCount + 1); // optimistic update
  const res = await fetch('/api/increment', { method: 'POST' });
  if (!res.ok) setCount(prevCount => prevCount - 1); // rollback on failure
}

This code increases a counter on the screen immediately, then tries to update the server. If the server fails, it resets the counter.

Execution Table

Step	Action	UI State (count)	Server Response	Resulting UI State
1	User clicks increment	0	N/A	0
2	Optimistic update: setCount(count + 1)	1	Waiting	1
3	Send POST to /api/increment	1	Waiting	1
4	Server responds OK	1	Success	1
5	No rollback needed	1	Success	1
6	User clicks increment again	1	N/A	1
7	Optimistic update: setCount(count + 1)	2	Waiting	2
8	Send POST to /api/increment	2	Waiting	2
9	Server responds ERROR	2	Failure	2
10	Rollback: setCount(previous count)	1	Failure	1

💡 Execution stops after rollback or confirmation from server.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 7	After Step 9	Final
count	0	1	1	2	2	1

Key Moments - 3 Insights

Why does the UI update before the server confirms?

The UI updates immediately to keep the app feeling fast and responsive, as shown in step 2 and 7 of the execution_table.

What happens if the server rejects the update?

The UI rolls back to the previous state to stay correct, as seen in step 10 where count goes back from 2 to 1.

Why do we keep track of the old state?

We save the old state so we can restore it if the server rejects the change, demonstrated by resetting count in step 10.

Visual Quiz - 3 Questions

Look at the execution_table, what is the UI state (count) immediately after the optimistic update in step 2?

A 1

B 0

C 2

D Undefined

💡 Hint

Check the 'UI State (count)' column at step 2 in the execution_table.

At which step does the UI rollback happen due to server failure?

A Step 4

B Step 10

C Step 9

D Step 7

💡 Hint

Look for the step where 'Rollback' is mentioned in the 'Action' column.

If the server always responds successfully, how would the final UI state after two increments change?

A It would rollback to 0

B It would stay at 1

C It would be 2

D It would be undefined

💡 Hint

Refer to the 'Resulting UI State' column after successful server responses in the execution_table.

Concept Snapshot

Optimistic state updates:
- Update UI immediately on user action
- Send server request in background
- If server confirms, keep UI
- If server rejects, rollback UI
- Makes app feel fast and responsive

Full Transcript

Optimistic state updates mean the app changes what you see right away when you do something, like clicking a button. Then it asks the server to save that change. If the server says yes, the app keeps the change. If the server says no, the app goes back to how it was before. This way, the app feels quick and smooth. In the example, when you click increment, the number on screen goes up immediately. Then the app sends a request to the server. If the server fails, the number goes back down. This helps users feel the app is fast even if the server is slow.