• Public
  • Public/Protected
  • All


⏱ async

lint status format status format status GitHub GitHub issues GitHub contributors GitHub last commit npm

A tiny asynchronous effect library for React.


Just run yarn add @rishiosaur/async or npm i @rishiosaur/async (whichever floats your boat) to grab the latest version.


async comes with two kinds of hooks: usePromiseEffect and useAsyncEffect. Note: most implementations of promise/asynchronous effects are largely the same—this one just happens to be a little bit faster and has some great types.


This hook returns an array of [value, loading, error]; the main hook passed to it must return some Promise<T>.

All error handling and internal state management is done for you; all you have to do is write the promise resolution logic!

Basic Example:

const App = () => {
  const [value, loading, err] = usePromiseEffect(() =>
    fetch('https://jsonplaceholder.typicode.com/todos/1').then((response) =>

  return (
          ? err
            ? JSON.stringify(err, null, 2)
            : JSON.stringify(value, null, 2)
          : 'Loading'}


This is much like usePromiseEffect, but it's much more like React's internal useEffect than anything:

Basic example:

function App() {
  const [state, setState] = useState();

  useAsyncEffect(async () => {
    const data = await fetch(
    ).then((res) => res.json());


  return (
      <p>{JSON.stringify(state, null, 2)}</p>

Notes about usage

Unlike React's useEffect, both hooks come with dependency array defaults; you just need to supply the hooks.

useAsyncEffect also has settings for cleanup functions & mounted states.

Generated using TypeDoc