useAsync

https://github.com/streamich/react-use/blob/master/docs/useAsync.md

React hook that resolves an async function or a function that returns a promise;

💡 Implementation

Pretty

Copy

1
const useAsync = (fn, args) => {
  const [state, set] = useState({
    loading: true
  });
  const memoized = useCallback(fn, args);
  useEffect(() => {
    let mounted = true;
    const promise = memoized();
    promise.then(
      value => {
        if (mounted) {
          set({
            loading: false,
            value
          });
        }
      },
      error => {
        if (mounted) {
          set({
            loading: false,
            error
          });
        }
      }
    );
    return () => {
      mounted = false;
    };
  }, [memoized]);
  return state;
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

🚀 Usage

Pretty

Copy

1
// Returns a Promise that resolves after one second.
const fn = () =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve("RESOLVED");
    }, 1000);
  });
function Demo() {
  const { loading, value, error } = useAsync(fn);
  return (
    <div>{loading ? <div>Loading...</div> : <div>Value: {value}</div>}</div>
  );
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

⚡Preview

Value: RESOLVED

🚨 console

💄 Improve this hook

Contributors

Raathigeshan