useBoundEffect.ts

function useBoundEffect<TArguments extends any[]>(
  effect: (...params: TArguments) => ReturnType<React.EffectCallback>,
  getArguments: () => TArguments
) {
  const lastArguments = useRef<TArguments | undefined>(undefined);
  const lastEffectCleanup = useRef<ReturnType<React.EffectCallback>>(undefined);

  useEffect(() => {
    const newArguments = getArguments();

    if (areEquivalent(lastArguments.current, newArguments)) {
      return;
    }

    lastArguments.current = newArguments;
    if (lastEffectCleanup.current) {
      lastEffectCleanup.current();
    }

    lastEffectCleanup.current = effect(...newArguments);
  });

  useEffect(() => {
    return () => {
      if (lastEffectCleanup.current) {
        lastEffectCleanup.current();
      }
    };
  }, []);
}

function areEquivalent<TArguments extends any[]>(
  left: TArguments | undefined,
  right: TArguments | undefined
) {
  if (!left) {
    return !right;
  }

  if (!right) {
    return false;
  }

  const { length } = left;
  if (length !== right.length) {
    return false;
  }

  for (let index = 0; index < length; ++index) {
    if (left[index] !== right[index]) {
      return false;
    }
  }

  return true;
}