LogoLogo
  • Home
  • Services
    • Fiber
    • Accessor
    • Schema
    • Form
    • Translator
  • Components
    • <Router/>
    • <Memo />
  • Observables
    • Async
    • Value
    • Store
    • List
    • Local Storage Value
    • Local Storage Store
    • Local Storage List
  • Hooks
    • useAsync
    • useAffect
    • useStream
    • useAction
    • useDebounce
    • useThrottle
    • usePrevious
    • useIdle
    • useValue
    • useList
    • useStore
    • useForm
    • useFormBinder
    • useTranslator
    • useQuery
  • Helpers
    • Tag
    • Input Helpers
    • Promise Helpers
    • Save Helpers
    • Pagination Helpers
    • Clipboard Helpers
    • Calendar Helpers
    • Local Storage Helpers
Powered by GitBook
On this page

Was this helpful?

  1. Hooks

useAsync

React hook for async operations.

PreviousLocal Storage ListNextuseAffect

Last updated 3 years ago

Was this helpful?

Source code is hosted on

yarn add @corets/use-async
npm install --save @corets/use-async

This library is built on top of this package:

useAsync()

Takes a function or an instance of , invokes it immediately, and keeps the state in sync with React:

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

const sharedQuery = createAsync(async () => "some global data")
    
const Example = () => {
  const query = useAsync(async () => `Current date is ${new Date().toISOString()}`)
  const globalQuery = useAsync(sharedQuery, ["some", "dependencies"])
  
  const handleReload = () => query.run()
  
  if (query.isRunning()) {
    return <h1>Loading ...</h1>
  }
  
  if (query.isErrored()) {
    return <h1>There was an error :(</h1>
  }
  
  return (
    <div>
      Result: {query.getResult()} 
      <button onClick={handleReload}>Reload</button>
    </div>
  )
}

Check out documentation for more details.

Async
GitHub
Async
Async