Reusable hook to load asynchronous data in React.

useDataLoader.js

import { useEffect, useState } from 'react';

function useDataLoader(promise, options) {
  const { autoload } = { autoload: true, ...options };
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(!!autoload);
  const [result, setResult] = useState(null);
  function action() {
    setLoading(true);
    setError(null);
    promise()
      .then(result => setResult(result))
      .catch(error => setError(error))
      .finally(() => setLoading(false));
  }
  useEffect(() => {
    if (autoload) {
      action();
    }
    // eslint-disable-next-line
  }, []);
  return { action, error, loading, result };
}

export default useDataLoader;