Optimistic UI Updates

The plain-language idea

Every server request has a gap between "user clicked" and "server confirmed." The honest way to handle that gap is a loading spinner. The optimistic way is to assume success, update the UI immediately, and only deal with the server's actual answer once it arrives — rolling back if it turns out you were wrong.

This isn't lying to the user so much as making a good bet. Liking a post, checking off a todo, sending a chat message — these succeed the overwhelming majority of the time, so paying the "wait for confirmation" cost on every single one, every single time, is optimizing for the rare case at the expense of the common one. The failure path still has to exist; it just runs in the background instead of blocking the interaction.

See it in a real thing: toggling a todo with rollback

import { useState } from "react";

function TodoItem({ todo, onToggle }) {
  const [items, setItems] = useState([todo]);
  const [error, setError] = useState(null);

  async function handleToggle() {
    const previous = items; // snapshot, in case we need to undo
    const optimistic = items.map((t) =>
      t.id === todo.id ? { ...t, done: !t.done } : t
    );
    setItems(optimistic); // update the screen immediately
    setError(null);

    try {
      await onToggle(todo.id); // the real request, running after the UI already moved
    } catch (err) {
      setItems(previous); // server said no — roll back
      setError("Couldn't save that change. Try again.");
    }
  }

  const current = items.find((t) => t.id === todo.id);
  return (
    <li>
      <label>
        <input type="checkbox" checked={current.done} onChange={handleToggle} />
        {current.text}
      </label>
      {error && <span role="alert">{error}</span>}
    </li>
  );
}

The shape is always the same three steps: snapshot the current state, apply the change as if it already succeeded, then either discard the snapshot (on success) or restore it (on failure). React 19's useOptimistic hook automates exactly this pattern for state that's derived from an async action — you give it a base value and a reducer for merging in the optimistic version, and it handles reverting automatically once the underlying action settles:

import { useOptimistic } from "react";

function TodoItem({ todo, toggleAction }) {
  const [optimisticTodo, setOptimisticTodo] = useOptimistic(
    todo,
    (state, done) => ({ ...state, done })
  );

  return (
    <form action={async () => {
      setOptimisticTodo(!optimisticTodo.done);
      await toggleAction(todo.id); // if this throws, React reverts automatically
    }}>
      <button>{optimisticTodo.done ? "Undo" : "Complete"}</button>
    </form>
  );
}

What people usually miss

Watch out

• Optimistic updates need a real error path, not just a revert. Silently snapping the checkbox back with no explanation leaves the user thinking their click didn't register. Pair the rollback with a visible message — a toast, an inline error — that says what happened.
• Order matters when multiple optimistic updates overlap. Toggling the same todo twice quickly, with both requests in flight, can resolve out of order and roll back the wrong state if you're not careful about which snapshot belongs to which request. Disabling the control during its own in-flight request is the simplest guard.
• Not everything should be optimistic. A "like" button is low-stakes and safe to assume-succeed. A payment or an irreversible delete is not — the cost of a wrong optimistic update there is much higher than the cost of a spinner, so the honest loading state is usually the right call for anything hard to undo.

The genealogy: this is the client/server state split made visible

Optimistic UI only makes sense once you've internalized that client state and server state are two different things that happen to usually agree — the todo's done flag in your component is a local copy, not the source of truth, and the whole pattern is just being explicit about the moment those two copies can disagree and how you reconcile them when they do.