react-async-hook

What is react-async-hook?

The react-async-hook package provides a set of hooks to manage asynchronous operations in React components. It simplifies handling async functions, loading states, and errors, making it easier to work with data fetching and other async tasks in a React application.

What are react-async-hook's main functionalities?

useAsync

The `useAsync` hook is used to handle asynchronous operations. It manages the loading state, error state, and the result of the async function. In this example, `useAsync` is used to fetch data from an API and display it.

```javascript
import React from 'react';
import { useAsync } from 'react-async-hook';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) throw new Error('Network response was not ok');
  return response.json();
};

const MyComponent = () => {
  const { loading, error, result } = useAsync(fetchData, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>Data: {JSON.stringify(result)}</div>;
};

export default MyComponent;
```

useAsyncCallback

The `useAsyncCallback` hook is used to handle asynchronous operations that are triggered by user actions, such as button clicks. It provides an `execute` function to trigger the async operation and manages the loading and error states.

```javascript
import React from 'react';
import { useAsyncCallback } from 'react-async-hook';

const saveData = async (data) => {
  const response = await fetch('https://api.example.com/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  if (!response.ok) throw new Error('Network response was not ok');
  return response.json();
};

const MyComponent = () => {
  const { execute, loading, error } = useAsyncCallback(saveData);

  const handleSave = () => {
    execute({ key: 'value' });
  };

  return (
    <div>
      <button onClick={handleSave} disabled={loading}>Save</button>
      {loading && <div>Saving...</div>}
      {error && <div>Error: {error.message}</div>}
    </div>
  );
};

export default MyComponent;
```

Other packages similar to react-async-hook

react-query

React Query is a powerful data-fetching library for React that provides hooks for fetching, caching, and updating data. It offers more advanced features like query caching, pagination, and background updates, making it suitable for complex data-fetching scenarios.

swr

SWR (stale-while-revalidate) is a React hook library for data fetching developed by Vercel. It focuses on simplicity and performance, providing features like caching, revalidation, and automatic updates. SWR is great for handling remote data fetching with minimal configuration.

react-use

react-use is a collection of essential React hooks, including hooks for handling async operations. It provides a wide range of hooks for various use cases, making it a versatile library for React developers. The async hooks in react-use are similar to those in react-async-hook but are part of a larger collection of utilities.

README

React-async-hook

• Simplest way to get async result / feedback in your React component
• Works with any React platform (ReactNative, Expo...)
• Refetch on params change
• Handle async callbacks (mutations)
• Handle concurrency issues if params change too fast
• Flexible, works with any async function, not just api calls
• Support for cancellation (AbortController)
• Possibility to trigger manual refetches / updates
• Options to customize state updates
• Very good, native, Typescript support
• Small and no dependency

Usecase: 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(`https://swapi.co/api/people/${id}/`)).json();

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

Usecase: 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}
    </button>
  );
};

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

Examples

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

Install

yarn add react-async-hook or

npm install react-async-hook --save

Warning

This library does not yet support React Suspense, but hopefully it will as soon as it can.

FAQ

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 usecase 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 usecase 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(
    `https://swapi.co/api/people/?search=${encodeURIComponent(text)}`,
    {
      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)
    [inputText]
  );

  // Return everything needed for the hook consumer
  return {
    inputText,
    setInputText,
    search,
  };
};

And then you can use your hook easily:

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

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 responsability to wire the abort signal appropriately.

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

  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 support retry?

Use a lib that simply adds retry feature to async/promises directly. Doesn't exist? Build it.

License

MIT

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.