javascript 47 lines · 8 steps

Diffing sets to sync group membership

Compute the minimal add/remove delta between two id lists, then apply only the changes inside a transaction.

Explained by highlit

Intermediate set-operations diffing transactions idempotency

1export function diffIds(current, desired) {
const currentSet = new Set(current);
const desiredSet = new Set(desired);
4 
const toAdd = [];
const toRemove = [];
7 
for (const id of desiredSet) {
  if (!currentSet.has(id)) toAdd.push(id);
}
11 
for (const id of currentSet) {
  if (!desiredSet.has(id)) toRemove.push(id);
}
15 
const unchanged = current.filter((id) => desiredSet.has(id));
17 
return {
  toAdd,
  toRemove,
  unchanged,
  hasChanges: toAdd.length > 0 || toRemove.length > 0,
};
24}
25 
26export async function syncMembership(groupId, desiredUserIds) {
const existing = await db.groupMembers.findAll({ where: { groupId } });
const { toAdd, toRemove, hasChanges } = diffIds(
  existing.map((m) => m.userId),
  desiredUserIds,
);
32 
if (!hasChanges) return { changed: false };
34 
await db.transaction(async (tx) => {
  if (toRemove.length) {
    await tx.groupMembers.destroy({ where: { groupId, userId: toRemove } });
  }
  if (toAdd.length) {
    await tx.groupMembers.bulkCreate(
      toAdd.map((userId) => ({ groupId, userId })),
    );
  }
});
45 
return { changed: true, added: toAdd, removed: toRemove };
47}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Wrapping id lists in Sets turns membership checks into O(1) lookups, keeping the diff linear.
2Computing a delta first lets you skip work entirely when nothing has changed.
3Applying removes and adds inside one transaction keeps the final state atomic and consistent.

Related explainers

javascript

const express = require('express');
const router = express.Router();
const { pool } = require('../db');
const redis = require('../redis');

Building a health check endpoint in Express

health-check timeouts promise-race

Intermediate 9 steps

php

<?php
 
namespace App\Http\Middleware;

Idempotent requests with Laravel middleware

idempotency middleware caching

Advanced 8 steps

javascript

'use client';
 
import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

How a Next.js error boundary recovers

error-boundary error-handling observability

Intermediate 8 steps

javascript

const MAX_BATCH_SIZE = 20;
const FLUSH_INTERVAL = 5000;
const ENDPOINT = '/api/analytics';

Batching analytics events in the browser

batching buffering sendbeacon

Intermediate 10 steps

javascript

class HistoryStack {
  constructor(initial = '', limit = 100) {
    this.past = [];
    this.present = initial;

Building an undo/redo history stack

undo-redo state-management debouncing

Intermediate 7 steps

javascript

import { useState, useCallback, useRef } from 'react';
 
function LikeButton({ postId, initialLiked, initialCount }) {
  const [liked, setLiked] = useState(initialLiked);