🔥 Как дебаунсить useEffect без лишних библиотек

Когда useEffect триггерится слишком часто — например, при вводе в input — можно легко добавить дебаунс. Без lodash, только setTimeout.

import { useEffect } from 'react'

function useDebouncedEffect(effect: () => void, deps: any[], delay: number) {
  useEffect(() => {
    const handler = setTimeout(() => effect(), delay)

    return () => clearTimeout(handler)
  }, [...deps, delay])
}

useDebouncedEffect(() => {
  fetch(`/api/search?q=${query}`)
}, [query], 500)

Frontend разработчик

🔥 Как дебаунсить useEffect без лишних библиотек

Когда useEffect триггерится слишком часто — например, при вводе в input — можно легко добавить дебаунс. Без lodash, только setTimeout.

import { useEffect } from 'react'

function useDebouncedEffect(effect: () => void, deps: any[], delay: number) {
  useEffect(() => {
    const handler = setTimeout(() => effect(), delay)

    return () => clearTimeout(handler)
  }, [...deps, delay])
}

📌 Использование:

useDebouncedEffect(() => {
  fetch(`/api/search?q=${query}`)
}, [query], 500)

✅ Плюсы:
– Простой и читаемый хук
– Не надо тащить lodash
– Управляемый debounce прямо в useEffect

⚠️ Важно: deps должны быть стабильны. Заворачивай колбэки в useCallback при необходимости.

👉 @frontend_1

hottg.com/frontend_1/3981

1.9K viewsMay 21 at 05:40