rooks
Version:
Collection of awesome react hooks
34 lines (33 loc) • 1.37 kB
TypeScript
import { type DependencyList } from "react";
import { type DebounceSettings } from "./useDebounce";
type AsyncEffect<T> = (shouldContinueEffect: () => boolean) => Promise<T>;
type CleanupFunction<T> = (result: T | void) => void;
/**
* useDebouncedAsyncEffect
* @description A version of useEffect that accepts an async function and debounces its execution based on dependency changes
* @param effect Async function that receives a shouldContinueEffect callback
* @param deps The dependency list that triggers the effect
* @param delay The debounce delay in milliseconds
* @param cleanup Optional cleanup function that receives the previous result
* @param options Optional debounce settings (leading, trailing, maxWait)
* @see https://rooks.vercel.app/docs/hooks/useDebouncedAsyncEffect
* @example
* ```jsx
* useDebouncedAsyncEffect(
* async (shouldContinueEffect) => {
* const data = await fetchData(searchQuery);
* if (shouldContinueEffect()) {
* setResults(data);
* }
* },
* [searchQuery],
* 500,
* (previousResult) => {
* // Cleanup
* }
* );
* ```
*/
declare function useDebouncedAsyncEffect<T>(effect: AsyncEffect<T>, deps: DependencyList, delay?: number, cleanup?: CleanupFunction<T>, options?: DebounceSettings): void;
export { useDebouncedAsyncEffect };
export type { AsyncEffect, CleanupFunction };