Suspender.ts

/** Wrapper class that creates an introspectable promise that can be used to suspend */
export class Suspender<T> {
  debug = false;
  promise: Promise<T>;
  finished = false;
  rejected = false;
  resolution: T | null = null;
  rejectReason: any = null;
  id = id++;

  constructor(promise: Promise<T>) {
    this.promise = promise
      .then((result) => {
        this.resolution = result;
        this.debug && console.debug(`[suspender] ID=${this.id} resolving`, result, this);
        return result;
      })
      .catch((reason) => {
        this.rejected = true;
        this.rejectReason = reason;
        this.debug && console.debug(`[suspender] ID=${this.id} rejecting`, reason, this);
        throw reason;
      })
      .finally(() => {
        this.finished = true;
      });
  }

  async get() {
    return await this.promise;
  }

  getOrSuspend(): T {
    if (this.finished) {
      if (this.rejected) {
        throw this.rejectReason;
      } else {
        return this.resolution as T;
      }
    }
    this.debug && console.trace(`[suspender] ID=${this.id} suspending`, this);
    throw this.promise;
  }
}

what-id-love-to-be-able-to-do.ts

// This would be nice, but doesn't work because the memo doesn't memoize if the component invoking this hook suspends
// That means a new Suspender is used every time, and getOrSuspend always suspends because the internal suspender state hasn't been set yet (which would happen on the next tick).
export const useSomeAsyncFunction = (key: string) => {
  const suspender = useMemo(() => new Suspender(Fetcher.fetch(key)), [key]);
  return suspender.getOrSuspend();
}