@bytesoftio/use-async

Installation

yarn add @bytesoftio/use-async or npm install @bytesoftio/use-async

Table of contents

• Description
• useAsync

Description

A convenient hook to deal with async operations inside React components.

useAsync

Function useAsync takes any other function that returns anything that can be awaited and returns its result as soon as the promise resolves. You also get some useful things like a loading indicator, the possible error that might have been thrown / or occurred through rejection and a reload function to rerun the async procedure. Async action can also be canceled with cancel or resolved directly using resolve.

import React from "react"
import { useAsync } from "@bytesoftio/use-async"

const fetchCommodityPrice = (commodity: string) => {
  return new Promise<string>((resolve) => {
    setTimeout(() => resolve(`${commodity}: 1000$`), 3000)
  })
}

const Component = () => {
  const handle = useAsync(() => fetchCommodityPrice("gold"))

  if (handle.loading) {
    return <span>Loading...</span>
  }

  if (handle.error) {
    return <span>There was an error :(</span>
  }

  return (
    <div>
      <span>{handle.result}</span>
      {/* reload commodity price */}
      <button onClick={() => handle.reload()}>reload</button>
      {/* fetch price for another commodity by replacing */}
      {/* the async action with a slightly different one */}
      <button onClick={() => handle.reload(() => fetchCommodityPrice("silver"))}>fetch price for silver</button>
    </div>
  )
}