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.

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 "./useStateAsync";

export default function App() {
  const [url, setUrl] = React.useState("");
  const { isLoading, data, error, setData, fetch } = useStateAsync(async () => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve("api data");
      }, 1000);
    });
  }, [url]);

  return (
    <div>
      <button onClick={() => setUrl("https://urlapi.com")}>Change url</button>
      <button onClick={() => fetch()}>Refetch api</button>
      <button onClick={() => setData("new data")}>Update data</button>
      {isLoading ? <p>Loading</p> : <p>Loaded</p>}
      {data && <p>{data}</p>}
      {error && <p>{error}</p>}
    </div>
  );
}