tgoop.com/frontend_1/3981
Create:
Last Update:
Last Update:
🔥 Как дебаунсить 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
BY Frontend разработчик

Share with your friend now:
tgoop.com/frontend_1/3981