Package Exports

react-use-state-async

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-use-state-async) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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