@react-hookz/web/esm/useRafCallback/useRafCallback.js

React hooks done right, for browser and SSR.

import { useCallback, useMemo, useRef } from 'react';
import { useSyncedRef, useUnmountEffect } from '..';
import { isBrowser } from "../util/const.js";
/**
 * Makes passed function to be called within next animation frame.
 *
 * Consequential calls, before the animation frame occurred, cancel previously scheduled call.
 *
 * @param cb Callback to fire within animation frame.
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function useRafCallback(cb) {
    var cbRef = useSyncedRef(cb);
    var frame = useRef(0);
    var cancel = useCallback(function () {
        if (!isBrowser)
            return;
        if (frame.current) {
            cancelAnimationFrame(frame.current);
            frame.current = 0;
        }
    }, []);
    useUnmountEffect(cancel);
    return [
        useMemo(function () {
            var wrapped = function () {
                var args = [];
                for (var _i = 0; _i < arguments.length; _i++) {
                    args[_i] = arguments[_i];
                }
                if (!isBrowser)
                    return;
                cancel();
                frame.current = requestAnimationFrame(function () {
                    cbRef.current.apply(cbRef, args);
                    frame.current = 0;
                });
            };
            Object.defineProperties(wrapped, {
                length: { value: cb.length },
                name: { value: "".concat(cb.name || 'anonymous', "__raf") },
            });
            return wrapped;
            // eslint-disable-next-line react-hooks/exhaustive-deps
        }, []),
        cancel,
    ];
}