@jamsesso/use-async/README.md

useAsync is a React hook that makes using async functions in your components easier

# useAsync

The `useAsync` hook makes consuming async function in React components easier. Inspired by the Apollo `useQuery`/`useMutation` hooks, `useAsync` aims to provide a similar API for general-purpose async functions.

# Dependencies

- Compatible with React >= 16.8.0.
- Written in ES5 CJS.

# Install

```
npm i --save @jamsesso/use-async
```

# Usage

```js
import { useEffect, useCallback } from 'react';
import useAsync from '@jamsesso/use-async';

function getMoviesFromApi() {
  return fetch(/* your async code example */).then(res => res.json());
}

function MovieList() {
  const [getMovieList, { loading, error, result }] = useAsync(getMoviesFromApi);

  useEffect(() => {
    getMovieList();
  }, []);

  const refreshList = useCallback(() => getMovieList(), []);

  return (
    <div class="movie-list">
      <h1>Movies</h1>
      {loading && <p>Loading...</p>}
      {error && <p>Oh no! Unable to load the movies 😭</p>}
      {result && (
        <ul>
          {result.map(movie => (
            <li key={movie.id}>{movie.title}</li>
          ))}
        </ul>
      )}
      <button onClick={refreshList}>Refresh movie list</button>
    </div>
  );
}
```

A few key things are outlined in this example:

- `useEffect` does not need an IIFE to call the function because the component re-renders as the promise is executed.
- `getMoviesFromApi` is the original async function.
- You can invoke `getMovieList` any number of times - state will cycle between `loading`, `error`, and `result` properly. Here it is used for the initial load and also to refresh the list on a button click event.