
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
react-use-async-hook
Advanced tools
⚠️ No new features! This repository is here for legacy purposes. Use react-use-async-fn instead for a better experience.
Perform async tasks like calling your API and manage them through react hooks
Using NPM:
npm i react-use-async-hook
Using yarn:
yarn add react-use-async-hook
This hooks takes the following options:
task
: (required) A function which gets performs the async task.dataLoader
: (optional) A function which extracts the required data from the async task.
For example, we may not need the whole response object from the API response,
but just the data that is returned by the API.initialData
: (optional, defaults to null) The place holder data to be used in place of the original data
until the data is fetched from the async task.executeOnLoad
: (optional, defaults to true) Should the task execute every time with the useEffect hook is executed.autoExecute
: Alias for executeOnLoad
. If both are given, this is ignored.onError
: (optional) This function is called when an error occurs. The default behavior just logs to the console.executeOnChange
: (optional, defaults to true) If true, Execute the task if either of dataLoader
, onError
, task
change. The execution behavior for various combinations are described below.executeOnLoad | executeOnChange | Behavior |
---|---|---|
true | true | executes on load and executes on task change |
true | false | executes on load and doesn't execute on task change |
false | true | doesn't executes on load, executes on task change |
false | false | doesn't executes on load, doesn't execute on task change |
This hook return an object containing:
data
: The data that is returned by the async task. This is obtained by passing this
value to the dataLoader
.loading
: Boolean indicating if the async task is still in progress.error
: The error that occurred during the async task.taskResult
: The whole returned value from the async task.execute
: A function that can be called to execute the task when ever needed.import useAsync from 'react-use-async'
function List (props){
const makeAPICall = useCallback((page)=>{
// Simulated API call
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: [1,2,3],
page,
})
}, 3000);
})
}, []);
let {
data, loading, error, execute: refresh
} = useAsync({
task: makeAPICall,
dataLoader: useCallback((response) => {
return response.data;
}, []),
initialData: useMemo(()=>([]), []),
});
return (
<>
{
loading ? (
<>
<div>Loading...</div>
</>
) : (
<div>
<button type="button" onClick={() => refresh(1)}>Refresh</button>
{data.map(x => <div key={x}>{x}</div>)}
</div>
)
}
</>
)
}
FAQs
Managed state for async tasks
The npm package react-use-async-hook receives a total of 194 weekly downloads. As such, react-use-async-hook popularity was classified as not popular.
We found that react-use-async-hook demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.