Optimistic UI And Reconciliation

Optimistic UI updates the screen before the server confirms the operation.

Why This Matters

It can make interfaces responsive, but the client must reconcile authoritative results, conflicts, validation errors, and retries.

Working Model

Optimistic UI updates the screen before the server confirms the operation. Correctness comes from preserving an explicit invariant across every permitted ordering, not from expecting one observed timing.

Roll Back Only The Matching Mutation

let favoriteVersion = 0;
let favorite = false;

async function toggleFavorite() {
  const mutationVersion = ++favoriteVersion;
  const previous = favorite;
  favorite = !favorite;
  renderFavorite(favorite);

  try {
    const response = await fetch("/api/favorite", {
      method: "PUT",
      body: JSON.stringify({ favorite }),
    });

    if (!response.ok) {
      throw new Error("Request failed: " + response.status);
    }
  } catch {
    if (mutationVersion === favoriteVersion) {
      favorite = previous;
      renderFavorite(favorite);
      showFavoriteError();
    }
  }
}

The version guard prevents an older failed request from rolling back a newer user action.

Practical Rules

• Assign temporary client IDs.
• Store enough prior state to roll back.
• Replace optimistic records with authoritative responses.
• Model pending, confirmed, failed, and conflict states.
• Do not optimistically expose security-sensitive success.

Failure Modes

• Assuming the server will assign the same values.
• Rolling back over a newer user edit.
• Treating timeout as definite failure.
• Hiding conflict resolution from users.

Verification

• Test success, rejection, timeout, and delayed success.
• Test edits made while pending.
• Assert temporary IDs are replaced once.
• Log reconciliation failures.

What You Should Be Able To Do

After this lesson, you should be able to explain optimistic state, rollback, authoritative reconciliation, and conflict presentation, choose a suitable approach for a real PHP project, and verify the result instead of relying on assumptions.