Optimistic state updates in NextJS

Introduction

Optimistic state updates make your app feel faster by showing changes right away before the server confirms them.

When you want to update a list item immediately after a user action, like liking a post.

When submitting a form and you want to show the new data instantly without waiting for the server.

When toggling a switch or button and you want the UI to respond instantly.

When you want to improve user experience by reducing waiting time after an action.

Syntax

NextJS

const [data, setData] = useState(initialData);

async function updateData(newValue) {
  const previousData = data;
  // Update UI immediately
  setData(newValue);

  try {
    // Send update to server
    await fetch('/api/update', { method: 'POST', body: JSON.stringify(newValue), headers: { 'Content-Type': 'application/json' } });
  } catch (error) {
    // Revert UI if server update fails
    setData(previousData);
  }
}

Use setState to update UI before server response.

Handle errors to revert changes if server update fails.

Examples

Increment count optimistically without waiting for server.

NextJS

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

function increment() {
  setCount((prev) => prev + 1); // Update UI immediately
  fetch('/api/increment', { method: 'POST' });
}

Add an item to list optimistically and revert on error.

NextJS

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

async function addItem(item) {
  setItems([...items, item]); // Show new item right away
  try {
    await fetch('/api/add', { method: 'POST', body: JSON.stringify({ item }), headers: { 'Content-Type': 'application/json' } });
  } catch {
    setItems(items); // Revert if error
  }
}

Sample Program

This component lets users like or unlike something. It updates the button immediately when clicked. If the server update fails, it changes back and shows an error message.

NextJS

import React, { useState } from 'react';

export default function LikeButton() {
  const [liked, setLiked] = useState(false);
  const [error, setError] = useState(null);

  async function toggleLike() {
    const previousLiked = liked;
    setLiked(!liked); // Optimistic update
    setError(null);

    try {
      const response = await fetch('/api/like', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ liked: !liked })
      });
      if (!response.ok) throw new Error('Server error');
    } catch (e) {
      setLiked(previousLiked); // Revert on error
      setError('Failed to update like status');
    }
  }

  return (
    <div>
      <button aria-pressed={liked} onClick={toggleLike} aria-label="Like button">
        {liked ? '❤️ Liked' : '🤍 Like'}
      </button>
      {error && <p role="alert" style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

Important Notes

Always handle errors to keep UI and server data in sync.

Optimistic updates improve user experience but need careful rollback logic.

Use ARIA attributes like aria-pressed for accessibility on toggle buttons.

Summary

Optimistic updates show changes instantly before server confirms.

They make apps feel faster and more responsive.

Always plan to revert changes if server update fails.

Practice

1. What is the main purpose of optimistic state updates in Next.js applications?

easy

A. To delay UI updates until the server responds

B. To prevent any UI changes until the user refreshes the page

C. To update the UI immediately before the server confirms the change

D. To disable user interactions during server requests

Solution

1. Step 1: Understand optimistic updates concept

   Optimistic updates update the UI immediately to make the app feel faster.

2. Step 2: Compare options with concept

   Only To update the UI immediately before the server confirms the change describes updating UI before server confirmation, matching optimistic updates.

3. Final Answer:

   To update the UI immediately before the server confirms the change -> Option C

4. Quick Check:

   Optimistic update = immediate UI change [OK]

Hint: Optimistic means acting before confirmation [OK]

Common Mistakes:

• Thinking UI waits for server response
• Confusing optimistic with pessimistic updates
• Assuming UI disables interactions

2. Which of the following is the correct way to implement an optimistic update using React's useState in Next.js?

easy

A. Use setTimeout to delay state update by 2 seconds

B. Update state after server response inside then()

C. Do not update state at all until server confirms

D. Update state immediately before sending server request

Solution

1. Step 1: Recall optimistic update timing

   Optimistic updates change state immediately before server response.

2. Step 2: Match options to timing

   Update state immediately before sending server request updates state immediately before request, fitting optimistic update pattern.

3. Final Answer:

   Update state immediately before sending server request -> Option D

4. Quick Check:

   Immediate state update = optimistic update [OK]

Hint: Update state before server reply for optimism [OK]

Common Mistakes:

• Waiting for server response before updating state
• Delaying state update unnecessarily
• Not updating state at all

3. Consider this Next.js React component snippet using optimistic updates:

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

async function increment() {
  setCount(count + 1); // optimistic update
  try {
    await fetch('/api/increment', { method: 'POST' });
  } catch {
    setCount(count); // revert on failure
  }
}

What will be the displayed count if the server request fails?

medium

A. The count reverts to the original value before increment

B. The count becomes undefined

C. The count resets to 0 regardless

D. The count remains incremented by 1

Solution

1. Step 1: Analyze optimistic update and revert logic

   Count increments immediately, but on fetch failure, count resets to original value.

2. Step 2: Understand revert on failure

   The catch block sets count back to original, undoing optimistic increment.

3. Final Answer:

   The count reverts to the original value before increment -> Option A

4. Quick Check:

   Failed fetch triggers revert = original count [OK]

Hint: Revert state on error to original value [OK]

Common Mistakes:

• Assuming optimistic update stays after failure
• Thinking count resets to zero always
• Ignoring catch block revert

4. Given this code snippet for optimistic updates in Next.js:

const [items, setItems] = useState([]);

async function addItem(newItem) {
  setItems([...items, newItem]);
  try {
    await fetch('/api/add', { method: 'POST', body: JSON.stringify(newItem) });
  } catch {
    // What is missing here?
  }
}

What is the best fix to handle errors properly?

medium

A. Remove the optimistic update and update only after fetch

B. Add code to revert items state to previous value in catch

C. Ignore errors since optimistic update is enough

D. Add a console.log in catch without state change

Solution

1. Step 1: Identify missing error handling

   Optimistic update changes state immediately, but no revert on failure.

2. Step 2: Add revert logic in catch block

   To keep UI consistent, revert items to previous state if fetch fails.

3. Final Answer:

   Add code to revert items state to previous value in catch -> Option B

4. Quick Check:

   Revert state on error = correct error handling [OK]

Hint: Revert state in catch to fix errors [OK]

Common Mistakes:

• Not reverting state on failure
• Removing optimistic update unnecessarily
• Only logging errors without UI fix

5. You want to implement optimistic updates for a list of tasks in Next.js. The user can add a task, and the UI should update immediately. However, if the server rejects the addition, the UI must revert. Which approach correctly handles this scenario?

hard

A. Update the tasks state immediately, then on server failure, reset tasks to previous state saved before update

B. Wait for server confirmation before updating tasks state to avoid inconsistencies

C. Update tasks state immediately and do nothing on failure, assuming server will eventually succeed

D. Clear the tasks list on server failure to force user refresh

Solution

1. Step 1: Understand optimistic update with revert

   Optimistic update means immediate UI change, but must revert on failure to keep UI correct.

2. Step 2: Evaluate options for correct revert handling

   Update the tasks state immediately, then on server failure, reset tasks to previous state saved before update saves previous state and reverts on failure, matching best practice.

3. Final Answer:

   Update the tasks state immediately, then on server failure, reset tasks to previous state saved before update -> Option A

4. Quick Check:

   Optimistic update + revert = Update the tasks state immediately, then on server failure, reset tasks to previous state saved before update [OK]

Hint: Save old state to revert if server fails [OK]

Common Mistakes:

• Not reverting UI on failure
• Waiting for server before UI update
• Clearing list unnecessarily on error