use-promise-hook

use-promise-hook.js

import { useEffect, useState } from 'react';

/**
 * Pass a memoized promise getter (via useCallback) so we do not attempt to
 * continuously re-request the promise.
 */
export default function usePromise(getPromise) {
  const [loading, setLoading] = useState(true);
  const [promise, setPromise] = useState();
  const [error, setError] = useState();
  const [result, setResult] = useState();

  useEffect(() => {
    setPromise(getPromise());
  }, [getPromise]);

  useEffect(() => {
    let mounted = true;

    if (promise)
      promise
        .then(res => mounted && setResult(res))
        .catch(err => mounted && setError(err))
        .finally(() => mounted && setLoading(false));
    
    return () => { mounted = false; }
  }, [promise]);

  return {
    error,
    loading,
    result,
  };
}