useAsyncFn

React hook that returns state and a callback for an async function or a function that returns a promise. The state is of the same shape as useAsync.

Usage

1import {useAsyncFn} from 'react-use';
2
3const Demo = ({url}) => {
4  const [state, doFetch] = useAsyncFn(async () => {
5    const response = await fetch(url);
6    const result = await response.text();
7    return result
8  }, [url]);
9
10  return (
11    <div>
12      {state.loading
13        ? <div>Loading...</div>
14        : state.error
15          ? <div>Error: {state.error.message}</div>
16          : <div>Value: {state.value}</div>
17      }
18      <button onClick={() => doFetch()}>Start loading</button>
19    </div>
20  );
21};

Reference

1useAsyncFn<Result, Args>(fn, deps?: any[], initialState?: AsyncState<Result>);