react-use-async-loading

A React hook for managing async loading state

Install

npm install --save react-use-async-loading

Usage

import { useLoading } from 'react-use-async-loading'

Show a spinner while fetching data

const Page = () => {
  const { loading, run } = useLoading()

  useEffect(() => {
    run(() => fetch('/data.json').then(res => res.json()).then(setData))
  }, [])

  if (loading) return <Spinner />

  return <div>Data was loaded</div>
}

Disable a button while submitting

const Form = () => {
  const { loading, run } = useLoading()

  const onSubmit = (values) => {
    run(() => axios.post('/register', values))
  }

  return <Form disabled={loading} onSubmit={onSubmit} />
}

Handle error state

const Page = () => {
  const { status, error, run } = useLoading()

  useEffect(() => {
    run(() => fetch('/data.json'))
  }, [])

  if (status === 'loading') return <Spinner />
  if (status === 'error') return <Error message={error.message} />
  if (status === 'success') return <div>Done</div>

  return null
}

Cancel previous request automatically

run() accepts a factory function that receives an AbortSignal. If run() is called again before the previous call resolves, the previous request is aborted automatically.

const Search = () => {
  const { loading, run } = useLoading()

  const onSearch = (query) => {
    run((signal) => fetch(`/search?q=${query}`, { signal }))
  }

  return <SearchInput loading={loading} onChange={onSearch} />
}

Reset state

const { status, run, reset } = useLoading()

// Aborts any in-flight request and resets status back to 'idle'
reset()

API

const { status, loading, idle, error, run, reset } = useLoading(defaultLoading?)

| Name | Type | Description | |---|---|---| | status | 'idle' \| 'loading' \| 'success' \| 'error' | Unified async state | | loading | boolean | true while run() is pending | | idle | boolean | true before run() has ever been called | | error | unknown | Error from the last failed run(), otherwise null | | run(fn) | (fn: (signal) => Promise) => Promise | Starts async operation. Aborts previous if still pending. Also accepts a plain promise. | | reset() | () => void | Aborts in-flight request, resets all state to initial |

License

MIT © Max Ivaneychyk