Optimistic state updates in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens immediately after clicking the button in this Next.js optimistic update?

Consider this Next.js component that updates a list of items optimistically when a button is clicked.

import { useState } from 'react';

export default function ItemList() {
  const [items, setItems] = useState(['apple', 'banana']);

  async function addItem() {
    setItems([...items, 'orange']); // optimistic update
    await fetch('/api/add', { method: 'POST', body: JSON.stringify({ item: 'orange' }) });
  }

  return (
    <div>
      <ul>
        {items.map(item => <li key={item}>{item}</li>)}
      </ul>
      <button onClick={addItem}>Add Orange</button>
    </div>
  );
}

NextJS

import { useState } from 'react';

export default function ItemList() {
  const [items, setItems] = useState(['apple', 'banana']);

  async function addItem() {
    setItems([...items, 'orange']); // optimistic update
    await fetch('/api/add', { method: 'POST', body: JSON.stringify({ item: 'orange' }) });
  }

  return (
    <div>
      <ul>
        {items.map(item => <li key={item}>{item}</li>)}
      </ul>
      <button onClick={addItem}>Add Orange</button>
    </div>
  );
}

A The list removes 'banana' immediately after clicking the button.

B The list waits for the server response before showing 'orange'.

C The list immediately shows 'apple', 'banana', and 'orange' before the server responds.

D The list clears all items immediately after clicking the button.

💡 Hint

Think about what 'optimistic update' means: updating UI before server confirms.

Optimistic updates immediately change the UI assuming the server call will succeed. Here, 'orange' is added to the list right away.

❓ state_output

intermediate

What is the state of 'items' after a failed server call in this optimistic update?

In this Next.js component, the optimistic update adds 'grape' to the list, but the server call fails.

import { useState } from 'react';

export default function FruitList() {
  const [items, setItems] = useState(['apple', 'banana']);

  async function addGrape() {
    setItems([...items, 'grape']); // optimistic update
    try {
      const res = await fetch('/api/add-grape', { method: 'POST' });
      if (!res.ok) throw new Error('Failed');
    } catch {
      setItems(items); // rollback
    }
  }

  return (
    <div>
      <ul>
        {items.map(item => <li key={item}>{item}</li>)}
      </ul>
      <button onClick={addGrape}>Add Grape</button>
    </div>
  );
}

NextJS

import { useState } from 'react';

export default function FruitList() {
  const [items, setItems] = useState(['apple', 'banana']);

  async function addGrape() {
    setItems([...items, 'grape']); // optimistic update
    try {
      const res = await fetch('/api/add-grape', { method: 'POST' });
      if (!res.ok) throw new Error('Failed');
    } catch {
      setItems(items); // rollback
    }
  }

  return (
    <div>
      <ul>
        {items.map(item => <li key={item}>{item}</li>)}
      </ul>
      <button onClick={addGrape}>Add Grape</button>
    </div>
  );
}

A The list remains ['apple', 'banana', 'grape'] after failure.

B The list reverts to ['apple', 'banana'] after failure.

C The list contains only ['grape'] after failure.

D The list becomes empty after failure.

💡 Hint

Rollback means undoing the optimistic change if the server call fails.

When the server call fails, the code resets the state to the original 'items' array, removing 'grape'.

📝 Syntax

advanced

Which option correctly implements an optimistic update with rollback in Next.js?

Choose the code snippet that correctly updates state optimistically and rolls back on error.

A

const prevItems = items;
setItems([...items, 'pear']);
try {
  await fetch('/api/add-pear', { method: 'POST' });
} catch {
  setItems(prevItems);
}

B

const prevItems = items;
try {
  setItems([...items, 'pear']);
  await fetch('/api/add-pear', { method: 'POST' });
} catch {
  setItems(prevItems);
}

C

setItems([...items, 'pear']);
try {
  await fetch('/api/add-pear', { method: 'POST' });
} catch {
  setItems([]);
}

D

setItems([...items, 'pear']);
try {
  await fetch('/api/add-pear', { method: 'POST' });
} catch {
  setItems([...items]);
}

💡 Hint

Remember to save the previous state before updating optimistically.

Option A saves the previous state, updates optimistically, and rolls back if the fetch fails. Option A updates state inside try before await, which can cause issues if fetch throws before state update.

🔧 Debug

advanced

Why does this optimistic update not rollback correctly on error?

Review this code snippet:

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

async function addItem() {
  setItems([...items, 'mango']);
  try {
    await fetch('/api/add-mango', { method: 'POST' });
  } catch {
    setItems(items);
  }
}

Why might the rollback fail to restore the original list?

NextJS

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

async function addItem() {
  setItems([...items, 'mango']);
  try {
    await fetch('/api/add-mango', { method: 'POST' });
  } catch {
    setItems(items);
  }
}

A Because the state update is asynchronous and cannot be rolled back.

B Because setItems cannot be called inside catch blocks.

C Because 'items' in catch refers to the updated state, not the original before update.

D Because fetch does not throw errors on HTTP failures by default.

💡 Hint

Consider the conditions under which fetch() rejects its promise.

fetch() does not reject on HTTP error status codes (4xx/5xx); it only rejects on network errors (e.g., no connection). On server errors like 500, the promise resolves, res.ok is false, but no throw occurs, so catch is skipped and no rollback happens.

🧠 Conceptual

expert

Which statement best describes the main benefit of optimistic state updates in Next.js?

Choose the best explanation for why developers use optimistic updates in Next.js applications.

A They improve user experience by showing UI changes immediately without waiting for server confirmation.

B They guarantee data consistency by waiting for server response before updating UI.

C They simplify code by removing the need for error handling in server requests.

D They prevent any UI changes until the server confirms the update.

💡 Hint

Think about how users feel when UI updates instantly.

Optimistic updates improve user experience by making the UI feel faster and more responsive, showing changes immediately while the server processes the request.