Concurrency Control for shared mutable state that gets mutated by asynchronous callbacks.

cancellation.js

/* @flow */

export class CancellationToken {
  source: CancellationTokenSource;
  requestId: number;

  constructor(source: CancellationTokenSource, requestId: number) {
    this.source = source;
    this.requestId = requestId;
  }

  isCancelled(): boolean {
    return this.source.requestId != this.requestId;
  }
}

export default class CancellationTokenSource {
  requestId: number;

  constructor() {
    this.requestId = 0;
  }

  cancel(): void {
    this.requestId++;
  }

  token(): CancellationToken {
    return new CancellationToken(this, this.requestId);
  }
}

export class StorageCancellationToken {
  source: StorageCancellationTokenSource;
  requestId: number;

  constructor(source: StorageCancellationTokenSource, requestId: number) {
    this.source = source;
    this.requestId = requestId;
  }

  isCancelled(): boolean {
    return this.source._loadRequestId() != this.requestId;
  }
}

export class StorageCancellationTokenSource {
  storageKey: string;

  constructor(key: string) {
    this.storageKey = key;
  }

  _loadRequestId() {
    const item = localStorage.getItem(this.storageKey) || '0';
    return parseInt(item, 10);
  }

  cancel(): void {
    const newRequestId = this._loadRequestId() + 1;
    localStorage.setItem(this.storageKey, '' + newRequestId);
  }

  token(): StorageCancellationToken {
    const requestId = this._loadRequestId();
    return new StorageCancellationToken(this, requestId);
  }
}

Create one CancellationTokenSource close to the mutable state that needs to change atomically.

const cts = new CancellationTokenSource();

when the use initiates an action, cancel all previous mutations to the state

cts.cancel();

if the user action trigger an async operation, get acquire a token

const token = cts.token();
const res = await fetchSomething(...);
const res2 = await fetchSomethingElse(res.something);
if (token.isCancelled()) return;  // cancel the mutation because token is cancelled
mutateThePartOfTheUIAssociatedWithTheCTS(res2);

although not a requirement for correctness, you can add token.isCancelled() checks before any step in the chain of async operations to avoid unnecessary work

 const token = cts.token();
 const res = await fetchSomething(...);
+if (token.isCancelled()) return; 
 const res2 = await fetchSomethingElse(res.something);
 if (token.isCancelled()) return;  // cancel the mutation because token is cancelled
 mutateThePartOfTheUIAssociatedWithTheCTS(res2);

You can use this to avoid many concurrency problems in JS apps like the one described in
https://twitter.com/geoffreylitt/status/1783566102838104313

This is very similar to Optmistic Concurrency Control in databases, with the difference that a conflicting transaction against the UI state isn't restarted and simply discarded.

Example of usage on a screen like https://twitter.com/geoffreylitt/status/1783566102838104313

// CTS protecting the input and output=2*input against conflicting updates
const cts = new CancellationTokenSource();

function onClick(oldNumber) {
  cts.cancel();
  const token = cts.token;

  const number = oldNumber + 1;
  updateInput(number);
  updateOutput('calculating...');
  setTimeout(() => {
    if (token.isCancelled()) return;  // avoid starting work that will be wasted

    // "expensive" computation on number that happens asynchronously
    setTimeout(() => {
      if (token.isCancelled()) return;  // avoid commiting inconsistent state

      updateOutput(number * 2);
    }, /*delay=*/Math.floor(Math.random() * 1001));
  }, /*delay=*/Math.floor(Math.random() * 1001));
}