@artcom/async-task-hook
v1.2.0
Published
A react hook to perform async tasks.
Downloads
43
Readme
Async Task Hook
Provides an react hook for async tasks.
Features
Runs a given async task in a useEffect hook. The returned state contains the status of the runnning task as well as the result or error. The task completion will be ignored if the component has been unmounted.
Note: The given task function must not change (e.g. wrapped with useCallback) otherwise a new task (read useEffect) will be started and the previous result will be ignored.
States
RUNNING
the initial state and the state while the task is running.FINISHED
the final state as soon as the method has finished.ERROR
the final state if the task threw an error.
Example
This example queries content with axios. The component receives the url
as property and creates a persistent queryFunc
which is fed to the async task hook. The returned result can be accessed when the async task has FINISHED
. If the method throws an exception the status will be set to ERROR
import axios from 'axios'
import React, { useCallback } from "react"
import { useAsyncTask, RUNNING, FINISHED, ERROR } from "@artcom/async-task-hook"
const MyComponent = ({ url }) => {
const queryFunc = useCallback(() => axios.get(url), [url])
const query = useAsyncTask(queryFunc)
switch(query.status) {
case RUNNING: return <>Loading...</>
case FINISHED: return <>query.result</>
case ERROR: return <>query.error</>
}
}
Tests
Checkout the tests for different scenarios.
npm i && npm run test