Optimistic state updates in NextJS - Performance & Optimization

Performance: Optimistic state updates

MEDIUM IMPACT

Optimistic state updates improve user interaction speed by showing UI changes immediately before server confirmation, impacting input responsiveness and perceived performance.

Updating UI state immediately after user action while waiting for server response

NextJS

function handleClick() {
  const oldState = state;
  setState(newState); // update UI immediately
  fetch('/api/update', { method: 'POST' })
    .then(response => {
      if (!response.ok) {
        setState(oldState); // rollback on server error
        throw new Error();
      }
    })
    .catch(() => {
      setState(oldState); // rollback on network error
    });
}

UI updates instantly, improving input responsiveness and user experience.

📈 Performance GainReduces INP by 200-500ms, providing immediate feedback without waiting for server.

Updating UI state immediately after user action while waiting for server response

NextJS

async function handleClick() {
  const response = await fetch('/api/update', { method: 'POST' });
  if (response.ok) {
    setState(newState);
  }
}

UI waits for server response before updating, causing input delay and poor responsiveness.

📉 Performance CostBlocks interaction feedback until server responds, increasing INP by 200-500ms depending on network.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Wait for server response before UI update	Minimal until response	1 reflow after response	1 paint after response	[X] Bad
Optimistic UI update with rollback on failure	Immediate DOM update	1 reflow on update, possible 1 reflow on rollback	1 paint per update/rollback	[OK] Good

Rendering Pipeline

Optimistic updates trigger immediate state changes that cause React to re-render components and update the DOM before server confirmation.

→JavaScript Execution

→Reconciliation

→Layout

→Paint

→Composite

⚠️ BottleneckReconciliation and Layout stages can be costly if many components update or rollback frequently.

Core Web Vital Affected

INP

Optimistic state updates improve user interaction speed by showing UI changes immediately before server confirmation, impacting input responsiveness and perceived performance.

Optimization Tips

1Update UI state immediately on user action to improve responsiveness.

2Handle rollback carefully to avoid excessive layout shifts and reflows.

3Batch state updates to minimize rendering overhead.

Performance Quiz - 3 Questions

What is the main performance benefit of optimistic state updates?

A They eliminate the need for server communication.

B They reduce the total number of DOM nodes on the page.

C They show UI changes immediately, improving input responsiveness.

D They prevent any layout shifts from happening.

DevTools: Performance

How to check: Record a session while interacting with the UI; look for time between input event and next paint.

What to look for: Short input delay and immediate paint after user action indicate good optimistic update performance.