React Hooks for working with async operations.

Install

yarn add react-hooks-async-handlers

or

npm i -S react-hooks-async-handlers

Methods

• useAsyncHandler
• useAsyncFetch
• useAsyncIntervalFetch

Usage

Look example of usage for 2 types of handlers.

import { useAsyncHandler, useAsyncFetch } from 'react-hooks-async-handlers'

// automatically executed on mount
const fetchAction = useAsyncFetch(async () => {
  await api.getUser()
})

// manual execute
const deleteAction = useAsyncHandler(async () => {
  await api.deleteUser()
})

return <button onClick={() => deleteAction.execute()}>delete</button>

Docs

useAsyncHandler

Hook provides ability to run async operation inside our component.

Hook returns: isLoading, isDone, error statuses for async operation.

To start action, you need to manually start running action by calling action.execute() function

Example:

import { useAsyncHandler } from 'react-hooks-async-handlers'

const createAction = useAsyncHandler(async () => {
  await api.createObject()
})
const { isLoading, isDone, execute, error } = createAction

if (isLoading) return 'action in progress'
if (error) return `error happened: ${error}`
if (isDone) return 'action completed successfully'

return <div onClick={execute}>click</div>

useAsyncFetch

Hook is a wrapper for useAsyncHandler hook. This hook runs action automatically, when component mounts and allows to retry an action if it fails.

Action will be executed automatically similar to useEffect(), buf if there is active action in progress, execution will be ignored. Once action will be finished only the last one will be emitted again.

Example of use with retry:

useFetch(async () => {
  await api.getPageObject()
}, { 
  maxTries: 4, timeoutBeforeRetry: 1000 
})

useAsyncIntervalFetch

Hook is a wrapper for useAsyncFetch hook. This hook runs action automatically, when component mounts and runs it again with specified interval.

Example of use with retry:

useAsyncIntervalFetch(
  async () => {
    await api.getPageObject()
  },
  30000
)

Advanced usage

Composition example using: api, redux, react-renderer-status-split

import { RendererStatusSplit } from 'react-renderer-status-split'
import { useAsyncFetch } from 'react-hooks-async-handlers'

function UserComponent({ user_id }) {
  const dispatch = useDispatch()
  const { user } = useSelector((state) => ({
    user: state.users[user_id],
  }))
  
  const userFetch = useAsyncFetch(
    async () => {
      await dispatch(Dispatcher.getUser(user_id))
    },
    { maxTries: 3 },
    [user_id] // action will run again if user_id will be changed.
  )
    
  return (
    <div>
      <h1>Page Title</h1>
  
      <div className={'content-container'}>
        <RendererStatusSplit
          statuses={userFetch}
          isEmpty={!user}
          renderPreview={() => <div>Loading will start soon</div>}
          renderLoading={() => <div>Component is loading</div>}
          renderError={(error) => <span color={'red'}>{error}</span>}
          renderEmpty={() => <div>Component is not found</div>}
          render={() => <UserInfo user={user} />}
        />
      </div>
    </div>
  ) 
}

See Also

List of libraries that work well with hook:

• react-renderer-status-split