useAsync.js

function useAsync() {
  const [fn, setFn] = useState(null);
  const [state, setState] = useState({
    loading: false,
    data: null,
    error: null
  });
  const lastCallId = useRef(0);

  useEffect(() => {
    let awaiting;

    if (!fn) {
      return () => {};
    }

    const callId = ++lastCallId.current;
    setState(s => ({ ...s, loading: true }));

    awaiting = makeCancelable(fn());
    awaiting.promise.then(
      function(res) {
        if (callId !== lastCallId.current) return;
        setState({ data: res, error: null, loading: false });
      },
      function(err) {
        if (callId !== lastCallId.current) return;
        setState({ data: null, error: err, loading: false });
      }
    );

    return () => {
      if (awaiting) {
        awaiting.cancel();
      }
    };
  }, [fn]);

  return [x => setFn(_ => x), state];
}