Frontend Patterns

Pattern

Conflict Resolution

Handle concurrent updates and data conflicts in distributed systems with last-write-wins, operational transforms, or CRDTs.

State Management Intermediate

Conflict Resolution

Problem

When multiple users edit the same data simultaneously, their changes can conflict. The last update might silently overwrite earlier changes, causing data loss and frustrating users who see their work disappear. In collaborative applications like document editors or real-time dashboards, you need a strategy to merge concurrent updates or notify users when conflicts occur.

Solution

Handle simultaneous edits to the same data by detecting conflicts and providing merge strategies or user intervention. This prevents data loss when multiple users or processes modify shared resources concurrently.

Example

This example demonstrates optimistic concurrency control using version numbers to detect and handle conflicts when multiple users edit the same data.

// Last-write-wins with version check to prevent conflicting updates
async function saveData(id, data, version) {
  // Attempt to save with the version number the client has
  const response = await api.put(`/items/${id}`, {
    ...data,
    version  // Server will check if this matches current version
  });

  // Status 409 Conflict means someone else updated the data first
  if (response.status === 409) {
    // Fetch the latest version to show user what changed
    const latest = await api.get(`/items/${id}`);
    return { conflict: true, latest };
  }

  // Update succeeded - no conflict detected
  return { success: true };
}

Benefits

  • Prevents data loss from simultaneous updates overwriting each other.
  • Enables collaborative features where multiple users edit shared data.
  • Provides clear feedback when conflicts occur instead of silent data loss.
  • Supports offline-first applications with eventual consistency.
  • Can implement sophisticated merge strategies like operational transforms or CRDTs.

Tradeoffs

  • Adds significant complexity to application logic and data models.
  • Requires careful design to choose appropriate conflict resolution strategies.
  • May frustrate users with conflict dialogs or unexpected merge results.
  • Can be difficult to test all edge cases and race conditions.
  • Some strategies like CRDTs have steep learning curves and implementation costs.
Stay Updated

Get New Patterns
in Your Inbox

Join thousands of developers receiving weekly insights on frontend architecture patterns

No spam. Unsubscribe anytime.