@lifi/widget/hooks/useDebouncedWatch.js

LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.

import { useEffect, useRef, useState } from 'react';
import { useWatch } from 'react-hook-form';
export const useDebouncedWatch = (name, delay) => {
    const watchedValue = useWatch({
        name,
    });
    const [debouncedValue, setDebouncedValue] = useState(watchedValue);
    const debouncedValueRef = useRef();
    const isMounted = useRef(false);
    useEffect(() => {
        if (isMounted.current) {
            const hasWatchedValue = Array.isArray(watchedValue)
                ? watchedValue.some((value) => value)
                : Boolean(watchedValue);
            if (hasWatchedValue) {
                const handler = setTimeout(() => {
                    setDebouncedValue(watchedValue);
                }, delay);
                return () => clearTimeout(handler);
            }
            debouncedValueRef.current = watchedValue;
            setDebouncedValue(watchedValue);
            return undefined;
        }
        isMounted.current = true;
        return undefined;
    }, [delay, watchedValue]);
    return debouncedValue;
};