Rollback on Error and Conflict Resolution
Restore previous state when a mutation fails and handle server-rejected optimistic changes gracefully.
Rollback Complexity Scales with Mutation Type
Rolling back an optimistic add (remove the item) or delete (restore the item) is straightforward. Rolling back an update is more complex: you must restore the exact previous value. If the item was updated multiple times optimistically, you must track each prior value separately, not just the original server state.
The Update Conflict Scenario
Consider this scenario: the server has item at value Z. You optimistically update to X. While your request is in-flight, another user updates the same item to Y on the server. Your request arrives and the server rejects it (conflict). Your rollback target is Z, but the server's current state is Y. Restoring Z would overwrite Y incorrectly.
All lessons in this course
- What Is Optimistic UI and When to Use It
- Implementing Optimistic Updates Manually
- Rollback on Error and Conflict Resolution
- Optimistic Patterns with React Query and Zustand