react-use-state-async

A custom hook trigger call async function each dependencies changes. Support holding and updating for fetch data.

Demo

Install

With npm

npm install --save react-use-state-async

With yarn

yarn add react-use-state-async

Usage

import * as React from "react";
import useStateAsync from "react-use-state-async";

const getSomethingApi = (id) => {
  return new Promise((res, rej) => {
    setTimeout(() => {
      if (id % 2 === 0) res({ id, fakeData: true });
      rej("cannot get data");
    }, 2000);
  });
};

export default function App() {
  const [id, setId] = React.useState(0);
  const { isLoading, setData, fetch, data, error } = useStateAsync(async () => {
    // do async action
    try {
      const res = await getSomethingApi(id);
      return res;
    } catch (e) {
      throw e;
    }
  }, [id]);

  return (
    <div>
      <button onClick={() => setId((previousId) => previousId + 1)}>
        Fetch data with increase Id
      </button>
      <button onClick={() => fetch()}>Refetch api</button>
      <button onClick={() => setData({ ...data, update: true })}>
        Update data
      </button>
      {isLoading ? <p>Loading</p> : <p>Loaded</p>}
      {data && <p>{JSON.stringify(data)}</p>}
      {error && <p>{JSON.stringify(error)}</p>}
    </div>
  );
}

Props

useStateAsync(
  callback: () => any | async () => Promise<any>,
  dependencies: Array<any>
)

Exposed

| parameter | type | description | | --------- | -------- | ------------------------------------------- | | isLoading | boolean | `true if the callback function is running | | data | any | the data is returned in callback function | | error | any | the error is thrown in callback function | | setData | function | update \data` state | | fetch | function | trigger call callback function |

License

MIT ©