async-effect-hook
v1.0.1
Published
useEffect but for async effects, with clean-up, safe and easy
Downloads
214
Maintainers
Readme
useAsyncEffect Hook
Introduction
useAsyncEffect
is a React hook, similar to useEffect
, that will help you handle async effects easily and safely. It provides a convenient way to handle cleanup and lifecycle status checks for asynchronous operations such as API requests, data subscriptions, or other side effects.
Installation
npm install async-effect-hook
or
yarn add async-effect-hook
Usage
Basic Example
import { useAsyncEffect } from "async-effect-hook";
function MyComponent() {
useAsyncEffect(async status => {
const data = await fetchData();
if (status.active) {
// Perform actions if the cycle is still active
}
}, []);
// Component rendering logic goes here
}
Advanced Example with Cleanup
This example demonstrates how to use useAsyncEffect
with a cleanup function that will be executed before the effect is re-run or when the component unmounts:
import { useAsyncEffect } from "async-effect-hook";
function MyComponent() {
useAsyncEffect(
async status => {
const data = await fetchData();
// Cleanup logic
status.cleanup = () => {
// Cleanup operations, e.g., canceling a subscription or aborting a fetch request
};
if (status.active) {
// Update state or perform actions if the component is still active
}
},
[] // Dependencies
);
// Component rendering logic
}
API
useAsyncEffect(effect, deps)
effect
: A function that returns a promise. The function receives anAsyncEffectStatus
object.deps
: An optional array of dependencies, just like withuseEffect
.
AsyncEffectStatus
An object with the following properties:
active
: A boolean indicating if the cycle the effect was run in is still active (false
if the component unmounted or if the effect is re-running).cleanup
: An optional function that you can assign inside the effect for cleanup logic.
Best Practices
- Always check
status.active
before updating the state or performing actions in asynchronous tasks. - Define cleanup logic inside the async effect by setting
status.cleanup
. - Be cautious with dependencies to avoid unnecessary reruns of the effect.
License
This project is licensed under the MIT License.
For more information, issues, or contributions, please visit the GitHub repository.