React hook useFactory()

useFactory.ts

import { useLayoutEffect, useRef, useState } from 'react';

export type Dispose = () => void | undefined;

export type Disposable<T> = {
  instance: T;
  dispose: Dispose;
};

export type Factory<Arguments extends Tuple, Instance> = (
  ...props: Arguments
) => Disposable<Instance>;

export type Tuple = Array<unknown> &
  (
    | [void]
    | {
        length: number;
        every: (cb: (v: unknown, k: number) => boolean) => boolean;
        [k: number]: unknown;
      }
  );

const shallowCompare = <T extends Tuple>(a: T, b: T) => {
  return a.length === b.length && a.every((v, k) => v === b[k]);
};

/**
 * Returns an instance from calling f(...args).
 * Actually it's like useMemo() but support cleanup function.
 */
export const useFactory = <Arguments extends Tuple, Instance>(
  f: Factory<Arguments, Instance>,
  args: Arguments,
): Instance => {
  const intoState = () => [args, f(...args)] as const;
  const [[prevArgs, { instance, dispose }], setState] = useState(intoState);

  // Creating a new instance on `args` changes
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useLayoutEffect(
    () => {
      if (shallowCompare(args, prevArgs)) return;
      dispose?.();
      setState(intoState);
    },
    // Call each render
  );

  // Dispose on component destroy
  // Use ref to call actual dispose function
  {
    const disposeRef = useRef<Dispose>();
    disposeRef.current = dispose;
    useLayoutEffect(() => {
      return () => disposeRef.current?.();
    }, []);
  }

  return instance;
};