React Async Hook

React hook to handle any async operation in React components, and prevent race conditions
Alternatives To React Async Hook
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Query36,42851,1734 hours ago491January 25, 202342mitTypeScript
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
Swr28,01113889a day ago148July 26, 202384mitTypeScript
React Hooks for Data Fetching
React Refetch3,43815725a month ago82January 20, 202050otherJavaScript
A simple, declarative, and composable way to fetch data for React components
Use Http2,2775354 months ago102May 04, 202385mitTypeScript
🐶 React hook for making isomorphic http requests
React Async2,12640071a month ago90March 27, 202057iscJavaScript
🍾 Flexible promise-based React data loader
Data Client1,834
3 days ago5apache-2.0TypeScript
Async State Management without the Management
Alova1,766122 days ago125August 29, 202312mitTypeScript
Request strategy library for MVVM libraries such as Vue.js, React.js and Svelte.js
Cross Fetch1,58714,3084,9142 months ago49July 03, 202310mitJavaScript
Universal WHATWG Fetch API for Node, Browsers and React Native.
React Async Hook1,13022727 months ago26September 24, 202128TypeScript
React hook to handle any async operation in React components, and prevent race conditions
Frisbee1,120721910 months ago62July 10, 2020n,ullmitJavaScript
:dog2: Modern fetch-based alternative to axios/superagent/request. Great for React Native.
Alternatives To React Async Hook
Select To Compare

Alternative Project Comparisons


NPM Build Status

This tiny library only does one thing, and does it well.

Sponsor the best newsletter to stay up-to-date with the React ecosystem: banner

Don't expect it to grow in size, it is feature complete:

  • Handle fetches (useAsync)
  • Handle mutations (useAsyncCallback)
  • Handle cancellation (useAsyncAbortable + AbortController)
  • Handle race conditions
  • Platform agnostic
  • Works with any async function, not just backend API calls, not just fetch/axios...
  • Very good, native, Typescript support
  • Small, no dependency
  • Rules of hooks: ESLint find missing dependencies
  • Refetch on params change
  • Can trigger manual refetch
  • Options to customize state updates
  • Can mutate state after fetch
  • Returned callbacks are stable

Small size

  • Way smaller than popular alternatives
  • CommonJS + ESM bundles
  • Tree-shakable
Lib min min.gz

Things we don't support (by design):

  • stale-while-revalidate
  • refetch on focus / resume
  • caching
  • polling
  • request deduplication
  • platform-specific code
  • scroll position restoration
  • SSR
  • router integration for render-as-you-fetch pattern

You can build on top of this little lib to provide more advanced features (using composition), or move to popular full-featured libraries like SWR or React-Query.

Use-case: loading async data into a component

The ability to inject remote/async data into a React component is a very common React need. Later we might support Suspense as well.

import { useAsync } from 'react-async-hook';

const fetchStarwarsHero = async id =>
  (await fetch(`${id}/`)).json();

const StarwarsHero = ({ id }) => {
  const asyncHero = useAsync(fetchStarwarsHero, [id]);
  return (
      {asyncHero.loading && <div>Loading</div>}
      {asyncHero.error && <div>Error: {asyncHero.error.message}</div>}
      {asyncHero.result && (
          <div>Name: {}</div>

Use-case: injecting async feedback into buttons

If you have a Todo app, you might want to show some feedback into the "create todo" button while the creation is pending, and prevent duplicate todo creations by disabling the button.

Just wire useAsyncCallback to your onClick prop in your primitive AppButton component. The library will show a feedback only if the button onClick callback is async, otherwise it won't do anything.

import { useAsyncCallback } from 'react-async-hook';

const AppButton = ({ onClick, children }) => {
  const asyncOnClick = useAsyncCallback(onClick);
  return (
    <button onClick={asyncOnClick.execute} disabled={asyncOnClick.loading}>
      {asyncOnClick.loading ? '...' : children}

const CreateTodoButton = () => (
    onClick={async () => {
      await createTodoAPI('new todo text');
    Create Todo


Examples are running on this page and implemented here (in Typescript)


yarn add react-async-hook or

npm install react-async-hook --save


If you use ESLint, use this react-hooks/exhaustive-deps setting:

// .eslintrc.js
module.exports = {
  // ...
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': [
        additionalHooks: '(useAsync|useAsyncCallback)',


How can I debounce the request

It is possible to debounce a promise.

I recommend awesome-debounce-promise, as it handles nicely potential concurrency issues and have React in mind (particularly the common use-case of a debounced search input/autocomplete)

As debounced functions are stateful, we have to "store" the debounced function inside a component. We'll use for that use-constant (backed by useRef).

const StarwarsHero = ({ id }) => {
  // Create a constant debounced function (created only once per component instance)
  const debouncedFetchStarwarsHero = useConstant(() =>
    AwesomeDebouncePromise(fetchStarwarsHero, 1000)

  // Simply use it with useAsync
  const asyncHero = useAsync(debouncedFetchStarwarsHero, [id]);

  return <div>...</div>;

How can I implement a debounced search input / autocomplete?

This is one of the most common use-case for fetching data + debouncing in a component, and can be implemented easily by composing different libraries. All this logic can easily be extracted into a single hook that you can reuse. Here is an example:

const searchStarwarsHero = async (
  text: string,
  abortSignal?: AbortSignal
): Promise<StarwarsHero[]> => {
  const result = await fetch(
      signal: abortSignal,
  if (result.status !== 200) {
    throw new Error('bad status = ' + result.status);
  const json = await result.json();
  return json.results;

const useSearchStarwarsHero = () => {
  // Handle the input text state
  const [inputText, setInputText] = useState('');

  // Debounce the original search async function
  const debouncedSearchStarwarsHero = useConstant(() =>
    AwesomeDebouncePromise(searchStarwarsHero, 300)

  const search = useAsyncAbortable(
    async (abortSignal, text) => {
      // If the input is empty, return nothing immediately (without the debouncing delay!)
      if (text.length === 0) {
        return [];
      // Else we use the debounced api
      else {
        return debouncedSearchStarwarsHero(text, abortSignal);
    // Ensure a new request is made everytime the text changes (even if it's debounced)

  // Return everything needed for the hook consumer
  return {

And then you can use your hook easily:

const SearchStarwarsHeroExample = () => {
  const { inputText, setInputText, search } = useSearchStarwarsHero();
  return (
      <input value={inputText} onChange={e => setInputText(} />
        {search.loading && <div>...</div>}
        {search.error && <div>Error: {search.error.message}</div>}
        {search.result && (
            <div>Results: {search.result.length}</div>
              { => (
                <li key={}>{}</li>

How to use request cancellation?

You can use the useAsyncAbortable alternative. The async function provided will receive (abortSignal, ...params) .

The library will take care of triggering the abort signal whenever a new async call is made so that only the last request is not cancelled. It is your responsibility to wire the abort signal appropriately.

const StarwarsHero = ({ id }) => {
  const asyncHero = useAsyncAbortable(
    async (abortSignal, id) => {
      const result = await fetch(`${id}/`, {
        signal: abortSignal,
      if (result.status !== 200) {
        throw new Error('bad status = ' + result.status);
      return result.json();

  return <div>...</div>;

How can I keep previous results available while a new request is pending?

It can be annoying to have the previous async call result be "erased" everytime a new call is triggered (default strategy). If you are implementing some kind of search/autocomplete dropdown, it means a spinner will appear everytime the user types a new char, giving a bad UX effect. It is possible to provide your own "merge" strategies. The following will ensure that on new calls, the previous result is kept until the new call result is received

const StarwarsHero = ({ id }) => {
  const asyncHero = useAsync(fetchStarwarsHero, [id], {
    setLoading: state => ({ ...state, loading: true }),
  return <div>...</div>;

How to refresh / refetch the data?

If your params are not changing, yet you need to refresh the data, you can call execute()

const StarwarsHero = ({ id }) => {
  const asyncHero = useAsync(fetchStarwarsHero, [id]);

  return <div onClick={() => asyncHero.execute()}>...</div>;

How to handle conditional fetch?

You can enable/disable the fetch logic directly inside the async callback. In some cases you know your API won't return anything useful.

const asyncSearchResults = useAsync(async () => {
  // It's useless to call a search API with an empty text
  if (text.length === 0) {
    return [];
  } else {
    return getSearchResultsAsync(text);
}, [text]);

How to have better control when things get fetched/refetched?

Sometimes you end up in situations where the function tries to fetch too often, or not often, because your dependency array changes and you don't know how to handle this.

In this case you'd better use a closure with no arg define in the dependency array which params should trigger a refetch:

Here, both state.a and state.b will trigger a refetch, despite b is not passed to the async fetch function.

const asyncSomething = useAsync(() => fetchSomething(state.a), [

Here, only state.a will trigger a refetch, despite b being passed to the async fetch function.

const asyncSomething = useAsync(() => fetchSomething(state.a, state.b), [

Note you can also use this to "build" a more complex payload. Using useMemo does not guarantee the memoized value will not be cleared, so it's better to do:

const asyncSomething = useAsync(async () => {
  const payload = buildFetchPayload(state);
  const result = await fetchSomething(payload);
  return result;
}), [state.a, state.b, state.whateverNeedToTriggerRefetch]);

You can also use useAsyncCallback to decide yourself manually when a fetch should be done:

const asyncSomething = useAsyncCallback(async () => {
  const payload = buildFetchPayload(state);
  const result = await fetchSomething(payload);
  return result;

// Call this manually whenever you need:

How to support retry?

Use a lib that adds retry feature to async/promises directly.



Hire a freelance expert

Looking for a React/ReactNative freelance expert with more than 5 years production experience? Contact me from my website or with Twitter.

Popular Reactjs Projects
Popular Fetch Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.