Optimistic UI Updates Must Be Rolled Back on Server Rejection

Optimistic UI applies changes instantly for responsiveness, but when the server rejects the operation (validation error, concurrent conflict), the UI is left in an incorrect state with no user feedback.

Assign a temporary ID to each optimistic update. Store the previous state. On server error, revert to the stored state and show an error. On success, replace the temp ID with the server-assigned ID.

type OptimisticItem = { id: string; optimistic?: boolean; text: string };

async function addItem(text: string) {
  const tempId = `temp-${Date.now()}`;
  const prevItems = [...items];

  // Optimistic add
  setItems(prev => [...prev, { id: tempId, text, optimistic: true }]);

  try {
    const created = await api.post('/items', { text });
    // Replace temp item with real one
    setItems(prev => prev.map(i => i.id === tempId ? created : i));
  } catch (err) {
    // Roll back
    setItems(prevItems);
    showError('Failed to add item. Please try again.');
  }
}

Without rollback, failed optimistic updates leave ghost data in the UI. Users may try to interact with items that do not exist on the server, causing cascading errors.