Optimistic updates pattern in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens immediately after triggering an optimistic update?

Consider a Next.js component using optimistic updates to add a new item to a list. What will the user see right after clicking the add button, before the server confirms?

NextJS

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

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

// User clicks button to add 'orange'

A The list immediately shows 'orange' added, even before server response.

B The list removes all items temporarily during the request.

C The list waits until server confirms before showing 'orange'.

D The list shows an error message immediately after clicking.

💡 Hint

Think about what optimistic update means: showing changes before confirmation.

Optimistic updates show the new data immediately to improve user experience. The UI updates before the server confirms the change.

❓ state_output

intermediate

What is the state of the list after a failed optimistic update?

Given this Next.js code snippet using optimistic updates, what will be the final state of the items if the server request fails and no rollback is implemented?

NextJS

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

async function addPet(pet) {
  setItems([...items, pet]); // optimistic update
  try {
    const res = await fetch('/api/addPet', { method: 'POST', body: JSON.stringify({ pet }) });
    if (!res.ok) throw new Error('Failed');
  } catch {
    // no rollback
  }
}

// addPet('rabbit') is called but server returns error

A The list becomes empty due to error.

B ['cat', 'dog'] remains because rollback removes 'rabbit'.

C ['cat', 'dog', 'rabbit'] remains in the list.

D The list shows only 'rabbit'.

💡 Hint

No rollback means the optimistic change stays even if server fails.

Without rollback, the UI keeps the optimistic change even if the server rejects it, so 'rabbit' stays in the list.

🔧 Debug

advanced

Why does this optimistic update cause a UI flicker?

Examine this Next.js code using optimistic updates. Why does the UI flicker when adding a new item?

NextJS

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

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

// User adds 'pear'

A Because setItems is called twice in a row, which is invalid syntax.

B Because the fetch call is blocking the UI thread.

C Because the optimistic update is missing a rollback.

D Because the list is cleared before adding, causing a brief empty render.

💡 Hint

Think about what happens when you clear the list before adding.

Clearing the list causes the UI to render empty briefly, then re-render with the new item, causing flicker.

📝 Syntax

advanced

Which option correctly implements rollback on optimistic update failure?

You want to optimistically add an item but revert if the server fails. Which code snippet correctly implements rollback?

A

setItems([...items, newItem]);
await fetch('/api/add', { method: 'POST', body: JSON.stringify({ newItem }) });
setItems(items);

B

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

C

setItems([...items, newItem]);
try {
  await fetch('/api/add', { method: 'POST', body: JSON.stringify({ newItem }) });
} catch {
  setItems([]);
}

D

const oldItems = items;
setItems([...items, newItem]);
await fetch('/api/add', { method: 'POST', body: JSON.stringify({ newItem }) });
setItems(oldItems);

💡 Hint

Rollback means restoring previous state only if fetch fails.

Option B saves old state, updates optimistically, and restores old state only on error.

Other options either restore state unconditionally or clear incorrectly.

🧠 Conceptual

expert

Why is optimistic update pattern beneficial in Next.js apps?

Select the best explanation for why optimistic updates improve user experience in Next.js applications.

A They make the UI feel faster by showing changes immediately without waiting for server response.

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

C They reduce server load by batching multiple requests into one.

D They prevent any errors by disabling user input during server requests.

💡 Hint

Think about user perception of speed and responsiveness.

Optimistic updates improve perceived speed by updating UI immediately, making apps feel more responsive.

They do not guarantee consistency or reduce server load directly.