diff --git a/src/useAsyncEffekt.ts b/src/useAsyncEffekt.ts index 83582ac..56d2bb9 100644 --- a/src/useAsyncEffekt.ts +++ b/src/useAsyncEffekt.ts @@ -1,70 +1,12 @@ import { useEffect, useRef, DependencyList } from "react"; /** - * A hook for handling async effects with proper dependency tracking and cleanup management. - * The name is intentionally spelled with "k" to work correctly with react-hooks/exhaustive-deps ESLint rule. + * Runs an asynchronous effect in a React component with dependency tracking, sequential execution, and robust cleanup handling. * - * @param effect - An async function to execute. Receives an object with: - * - `isMounted`: Function to check if the component is still mounted - * - `waitForPrevious`: Function that returns a Promise to wait for the previous effect and its cleanup to complete + * The effect function receives utilities to check if the component is still mounted and to wait for the completion of previous effects and their cleanups. Supports both synchronous and asynchronous cleanup functions returned from the effect. * - * The effect function can optionally return a cleanup function that can be either synchronous or asynchronous. - * - * @param deps - Dependency array for the effect (same as useEffect) - * - * @example - * // Basic usage without waiting for previous effects - * useAsyncEffekt(async ({ isMounted }) => { - * const data = await fetchData(); - * if (isMounted()) { - * setData(data); - * } - * }, []); - * - * @example - * // Usage with waiting for previous effect to complete - * useAsyncEffekt(async ({ isMounted, waitForPrevious }) => { - * await waitForPrevious(); // Wait for previous effect and cleanup - * const data = await fetchData(); - * if (isMounted()) { - * setData(data); - * } - * }, [dependency]); - * - * @example - * // Usage with synchronous cleanup - * useAsyncEffekt(async ({ isMounted }) => { - * const subscription = await createSubscription(); - * - * return () => { - * subscription.unsubscribe(); // Sync cleanup - * }; - * }, []); - * - * @example - * // Usage with asynchronous cleanup - * useAsyncEffekt(async ({ isMounted }) => { - * const connection = await establishConnection(); - * - * return async () => { - * await connection.close(); // Async cleanup - * }; - * }, []); - * - * @example - * // Complex usage with waiting and async cleanup - * useAsyncEffekt(async ({ isMounted, waitForPrevious }) => { - * await waitForPrevious(); // Ensure previous effect is fully cleaned up - * - * const resource = await acquireResource(); - * if (isMounted()) { - * setResource(resource); - * } - * - * return async () => { - * await resource.cleanup(); // Async cleanup - * }; - * }, [resourceId]); + * @param effect - An async function that receives an object with `isMounted` and `waitForPrevious` helpers. May return a cleanup function (sync or async). + * @param deps - Optional dependency array controlling when the effect runs, similar to React's `useEffect`. */ export function useAsyncEffekt( effect: ({ diff --git a/src/useAsyncMemo.ts b/src/useAsyncMemo.ts index fe62f9c..70cb3a8 100644 --- a/src/useAsyncMemo.ts +++ b/src/useAsyncMemo.ts @@ -1,11 +1,13 @@ import { useState, useEffect, useRef, DependencyList } from "react"; /** - * A hook for memoizing async computations with dependency tracking. + * Memoizes the result of an asynchronous computation, updating when dependencies change and preserving the last successful value on error. * - * @param factory - An async function that returns the memoized value - * @param deps - Dependency array for the memoization - * @returns The memoized value, undefined while loading, or the last successful value on error + * The factory function receives an `isMounted` callback to check if the component is still mounted before updating state. + * + * @param factory - Function that performs the asynchronous computation and receives an `isMounted` callback + * @param deps - Optional array of dependencies that trigger recomputation when changed + * @returns The current memoized value, which is `undefined` while loading or the last successful value if an error occurs */ export function useAsyncMemo( factory: (isMounted: () => boolean) => Promise | T,