use imperative action

use-action.js

function useImperativeAction(action) {
  const [status, setStatus] = useState(1);

  useEffect(() => {
    // negative means just cancel without re-running
    if (status >= 0) {
      return action();
    }
  }, [status]);

  const doAction = useCallback(() => {
    setStatus((oldStatus) => {
      if (oldStatus < 0) {
        // positive means cancel last and re-run action
        setStatus(1);
      } else {
        // ensure we don't set to the same value as before
        setStatus(oldStatus + 1);
      }
    });
  }, []);

  const cancel = useCallback(() => {
    // negative means just cancel without re-running
    setStatus(-1);
  }, []);

  return [doAction, cancel];
}