@supunlakmal/hooks/dist/hooks/performance-optimization/useRafState.js

A collection of reusable React hooks

import { useState, useCallback, useRef, useEffect } from 'react';
/**
 * A custom hook similar to `useState` but delays state updates
 * until the next animation frame using `requestAnimationFrame`.
 * This can be useful for performance-critical updates tied to rendering.
 *
 * @template S The type of the state.
 * @param initialState The initial state value or a function to compute it.
 * @returns A tuple containing the current state and a dispatch function to update it.
 */
export function useRafState(initialState) {
    const [state, setState] = useState(initialState);
    const rafRef = useRef(0);
    const dispatch = useCallback((value) => {
        // Cancel any pending updates
        if (rafRef.current) {
            cancelAnimationFrame(rafRef.current);
        }
        rafRef.current = requestAnimationFrame(() => {
            setState(value); // Pass the value/function directly to setState
            rafRef.current = 0; // Reset ref after update
        });
    }, []);
    // Cleanup function to cancel frame on unmount
    useEffect(() => {
        return () => {
            if (rafRef.current) {
                cancelAnimationFrame(rafRef.current);
            }
        };
    }, []);
    return [state, dispatch];
}
//# sourceMappingURL=useRafState.js.map