@utilityjs/use-get-latest/dist/index.d.ts

A React hook that stores & updates `ref.current` with the most recent value.

import { RefObject } from "react";

//#region src/use-get-latest.d.ts

/**
 * A React hook that stores and updates a ref with the most recent value.
 *
 * This hook is useful for accessing the latest value of a prop or state
 * inside callbacks, effects, or other closures without causing them to
 * re-run when the value changes. It's particularly helpful for avoiding
 * stale closures in event handlers and async operations.
 *
 * @template T The type of the value being stored
 * @param value The value to store and keep updated
 * @returns A ref object containing the latest value
 *
 * @example
 * ```tsx
 * function MyComponent({ onSubmit, data }) {
 *   const latestOnSubmit = useGetLatest(onSubmit);
 *   const latestData = useGetLatest(data);
 *
 *   const handleAsyncSubmit = useCallback(async () => {
 *     // These will always have the latest values
 *     // even if onSubmit or data change after the callback is created
 *     const result = await someAsyncOperation();
 *     latestOnSubmit.current(latestData.current, result);
 *   }, []); // No dependencies needed!
 *
 *   return <button onClick={handleAsyncSubmit}>Submit</button>;
 * }
 * ```
 *
 * @example
 * ```tsx
 * // Avoiding stale closures in intervals
 * function Counter({ step }) {
 *   const [count, setCount] = useState(0);
 *   const latestStep = useGetLatest(step);
 *
 *   useEffect(() => {
 *     const interval = setInterval(() => {
 *       setCount(c => c + latestStep.current); // Always uses latest step
 *     }, 1000);
 *
 *     return () => clearInterval(interval);
 *   }, []); // No need to include step in dependencies
 *
 *   return <div>Count: {count}</div>;
 * }
 * ```
 */
declare const useGetLatest: <T>(value: T) => RefObject<T>;
//#endregion
export { useGetLatest };
//# sourceMappingURL=index.d.ts.map