FRONTEND_1 Telegram 3981
🔥 Как дебаунсить 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



tgoop.com/frontend_1/3981
Create:
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

View MORE
Open in Telegram


Telegram News

Date: |

The main design elements of your Telegram channel include a name, bio (brief description), and avatar. Your bio should be: Select “New Channel” Avoid compound hashtags that consist of several words. If you have a hashtag like #marketingnewsinusa, split it into smaller hashtags: “#marketing, #news, #usa. The best encrypted messaging apps Telegram desktop app: In the upper left corner, click the Menu icon (the one with three lines). Select “New Channel” from the drop-down menu.
from us


Telegram Frontend разработчик
FROM American