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
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 betweenloading
,error
, andresult
properly. Here it is used for the initial load and also to refresh the list on a button click event.