A custom wrapper hook for useState that return a promise on calling setValue

usePromiseState.js

/**
 * A custom wrapper hook for useState that return a promise
 * on calling setValue.
 * Useful with APIs like document.startViewTransition
 *
 * Demo: https://codesandbox.io/p/sandbox/react-view-transition-list-3ycjj9
 *
 */
import { useEffect, useRef, useState } from "react";

export function usePromiseState(initialVal) {
  const [val, setVal] = useState(initialVal);
  const resolveRef = useRef();
  useEffect(() => {
    if (resolveRef.current) {
      resolveRef.current();
    }
  }, [val]);

  const setValue = (value) => {
    setVal(value);
    return new Promise((resolve) => {
      resolveRef.current = resolve;
    });
  };
  return [val, setValue];
}