React Hook to set promise as a state

useStatePromise.ts

function useStatePromise<S>(initialValue: S): [S, (promise: Promise<S>) => Promise<void>] {
  const [state, setState] = React.useState<S>(initialValue);
  const asyncCount: React.MutableRefObject<number> = React.useRef(0);

  async function setStatePromise(nextValuePromise: Promise<S>): Promise<void> {
    const currCount: number = ++asyncCount.current;
    const nextValue: S = await nextValuePromise;
    if (currCount === asyncCount.current) {
      setState(nextValue);
    }
  }

  // Cancel any async call when unmount.
  React.useEffect(() => {
    return () => {
      asyncCount.current++;
    };
  }, []);

  return [state, setStatePromise];
}