Создание пользовательского хука useThrottle

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

Отметка времени последнего выполнения должна сохраняться между рендерингами, не вызывая сама по себе повторных рендерингов, поэтому useRef — подходящий инструмент. Сохраните отметку времени так: const lastRunTime = useRef(Date.now()). В отличие от состояния, обновление ссылки не вызывает повторный рендеринг, поэтому логика ограничения частоты работает эффективно, без лишних циклов.

Хук useThrottle(value, delay) возвращает ограниченную по частоте версию входного значения. Его контракт похож на контракт useDebounce: принять любое значение и задержку в мс, а вернуть значение с ограниченной частотой обновления. Компоненты используют его так же, поэтому он служит прямой заменой при необходимости другой логики интервалов.

Ограничитель частоты с отложенным обновлением обновляет значение в конце каждого интервала. Когда поступает новое значение, запланируйте setTimeout на оставшееся время интервала: delay - (Date.now() - lastRunTime.current). Когда таймер срабатывает, обновите состояние и сохраните новое значение lastRunTime. В функции очистки отменяйте предыдущие таймеры.

Ограничитель частоты с немедленным обновлением применяет первое значение сразу и игнорирует последующие до истечения интервала. Проверьте: если Date.now() - lastRunTime.current >= delay, обновите состояние и сохраните время. В противном случае пропустите обновление. Это обеспечивает мгновенный отклик на первое действие и период ожидания после него.

Наилучшее взаимодействие с пользователем часто сочетает оба режима: немедленно реагировать на первое событие (немедленный режим), а затем гарантировать применение итогового состояния после завершения интервала (отложенный режим). Благодаря этому пользователь сразу видит результат, а окончательное значение всегда применяется после остановки движения, что предотвращает устаревшее конечное состояние.

Сохраняйте ID ожидающего таймера в useRef: const timeoutRef = useRef(null). Перед планированием нового таймера вызовите clearTimeout(timeoutRef.current), чтобы отменить существующий. Это предотвращает наложение нескольких таймеров, из-за которого в течение одного интервала ограничения частоты выполнялось бы несколько обновлений.

Функция очистки useEffect должна вызывать clearTimeout(timeoutRef.current), чтобы отменить ожидающее отложенное обновление при размонтировании компонента. В противном случае ожидающий таймер сработает после размонтирования и попытается изменить состояние размонтированного компонента, что может привести к предупреждениям React.

Вместо хука, работающего со значением, можно создать хук ограничения частоты на основе useCallback: useThrottledCallback(fn, delay) возвращает версию функции с ограничением частоты. Это гибче, когда ограничить частоту нужно для вызова функции, например для сбора аналитики, а не для реактивного значения.

В тестах Jest используйте jest.useFakeTimers(), чтобы управлять временем. Настройте ограничитель частоты с задержкой 1000 мс, выполните 10 быстрых изменений значения, затем продвиньте искусственное время на 500 мс и проверьте, что произошло только 1 или 2 обновления. Продвиньте время еще на 500 мс и убедитесь, что сработало отложенное обновление. Это позволяет надежно проверить поведение ограничителя частоты.

React обрабатывает обновления состояния пакетами во время отрисовки. Ограничитель частоты, работающий с обновлениями состояния, хорошо вписывается в эту модель. Однако учтите, что в конкурентном режиме React 18 отрисовку можно прервать. Сама логика ограничения частоты, основанная на реальном времени через Date.now(), не зависит от планирования React.

На каком крае срабатывает ограничитель частоты с «отложенным» режимом?

Ограничение частоты требует отслеживания времени последнего выполнения с помощью useRef. Хук может реализовывать немедленный режим, отложенный режим или оба режима. Всегда сохраняйте ID таймера в ссылке и отменяйте его в функции очистки. Для вариантов использования на основе функций предпочитайте шаблон useThrottledCallback. Для надежности проверяйте код с помощью поддельных таймеров.