В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке useDebounce, одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

Github: https://github.com/sergeyleschev/react-custom-hooks

import { useEffect } from "react"
import useTimeout from "../useTimeout/useTimeout"

export default function useDebounce(callback, delay, dependencies) {
    const { reset, clear } = useTimeout(callback, delay)
    useEffect(reset, [...dependencies, reset])
    useEffect(clear, [])
}

Хук useDebounce использует хук useTimeout для внутренней задержки выполнения функции обратного вызова до истечения заданного времени задержки. Таким образом, предотвращаются частые обновления, вызванные быстрыми изменениями ввода или повторяющимися событиями, что обеспечивает более плавное взаимодействие и снижает потребление ресурсов.

Одним из главных преимуществ useDebounce является его простота и гибкость. Заключив свою функцию обратного вызова, длительность задержки и любые зависимости в этот пользовательский хук, вы можете без особых усилий реализовать debounce, не загромождая код компонента. Хук управляет тайм-аутом и удаляет его при необходимости, гарантируя, что обратный вызов запускается только после указанной задержки и с учетом последних зависимостей.

Где вы можете использовать useDebounce? Возможности безграничны! Этот настраиваемый механизм особенно полезен в сценариях, где вам нужно обрабатывать вводимые пользователем данные, такие как строки поиска или поля формы, и где вы хотите отложить выполнение действия до тех пор, пока пользователь не закончит вводить текст или взаимодействовать с пользователем. Это также полезно для оптимизации сетевых запросов, гарантируя, что запросы будут отправляться только после того, как пользователь перестанет печатать или выбирать параметры.

import { useState } from "react"
import useDebounce from "./useDebounce"

export default function DebounceComponent() {
    const [count, setCount] = useState(10)
    useDebounce(() => alert(count), 1000, [count])
    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount(c => c + 1)}>Increment</button>
        </div>
    )
}

В приведенном выше примере мы демонстрируем возможности useDebounce, реализуя простой компонент счетчика под названием DebounceComponent. Каждый раз, когда пользователь нажимает кнопку «Увеличить», состояние счетчика обновляется. Однако вместо немедленного оповещения о значении count мы отключаем функцию оповещения с помощью useDebounce. Значение count будет отображаться с задержкой в 1 секунду, что эффективно предотвращает чрезмерное количество предупреждений при быстром нажатии кнопки.

Full Version | React Custom Hooks