Какой правильный код debounce React?

Question

[GNG999]

есть два подхода к дибаунс при живом поиске (search by text) в React
1
пишем дибаунс

export const debounce=(cb:Function,delay:number)=> {
    let timer:any
    return (...args:any[])=> {
        clearTimeout(timer);
        timer = setTimeout(()=>cb(...args),delay);
    }
}

используем в компоненте

const [searchText, setSearchText] = React.useState("");
    const [error, setError] = React.useState("");
    const [filterResults, setFilterResults] = React.useState([]);

    const handleFilter = async (searchText: string) => {
        const res = await filterByName(searchText);
        if (res.error) {
            setError(res.error);
        } else {
            setFilterResults(res.results);
        }
    }

    const debouncedSearchText = useCallback(debounce((value: string) => handleFilter(value), 300), [])
    
useEffect(() => {
        setError("")
        if (searchText.length > 2 || !searchText) {
            debouncedSearchText(searchText);
        }
    }, [searchText]);

2
пишем хук дибаунс и используем
хук

export const useDebounce = (dbValue: string, delay: number) => {
    const [value, setValue] = React.useState(dbValue);

    useEffect(() => {
        let timer = setTimeout(() => {
            setValue(dbValue)
        }, delay);

        return () => {
            clearTimeout(timer)
        };
    }, [dbValue])

    return value

}

const [searchText, setSearchText] = React.useState("");
    const [error, setError] = React.useState("");
    const [filterResults, setFilterResults] = React.useState([]);
    const debouncedText = useDebounce(searchText,300)

const handleFilter = async (searchText: string) => {
        const res = await filterByName(searchText);
        if (res.error) {
            setError(res.error);
        } else {
            setFilterResults(res.results);
        }
    }

useEffect(() => {
        handleFilter(debouncedText);
    }, [debouncedText]);

Какой подход более правильный ? Есть ли какие то грубые ошибки в одном из них ?

Answer 1

[historydev]

Оба варианта рабочие, но.
- Хук не используешь в циклах и условиях.
- Хук не используешь вне реакта.

- Хук более многословен, для 4 инпутов понадобится 4 вызова хука, 4 состояния и 4 эффекта для работы с каждым по отдельности - это весомый минус, а для useCallback с дебаунсом всего 4:

const debouncedSearchText = useCallback(debounce((value) => console.log(value), 300), []);
const debouncedSearchText = useCallback(debounce((value) => console.log(value), 300), []);
const debouncedSearchText = useCallback(debounce((value) => console.log(value), 300), []);
const debouncedSearchText = useCallback(debounce((value) => console.log(value), 300), []);

VS

const [inputValue, setInputValue] = useState('');
  const debouncedValue = useDebounce(inputValue, 300);

  useEffect(() => {
    console.log(debouncedValue);
  }, [debouncedValue]);

const [inputValue, setInputValue] = useState('');
  const debouncedValue = useDebounce(inputValue, 300);

  useEffect(() => {
    console.log(debouncedValue);
  }, [debouncedValue]);

const [inputValue, setInputValue] = useState('');
  const debouncedValue = useDebounce(inputValue, 300);

  useEffect(() => {
    console.log(debouncedValue);
  }, [debouncedValue]);

const [inputValue, setInputValue] = useState('');
  const debouncedValue = useDebounce(inputValue, 300);

  useEffect(() => {
    console.log(debouncedValue);
  }, [debouncedValue]);

Поэтому я считаю, что первый вариант намного предпочтительнее.