ReactTypeScript

React useDebounce Hook

Son değişiklikten belirli bir süre geçene kadar değer güncellemesini geciktiren hook.

reacthookdebounceperformance

TypeScript

import { useState, useEffect } from class=class="text-emerald-400">"text-emerald-400">'react'

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => clearTimeout(timer)
  }, [value, delay])

  return debouncedValue
}

export default useDebounce

Nasıl Kullanılır

Arama girişlerini geciktirmek için kullanın: const debouncedSearch = useDebounce(searchTerm, 300). debouncedSearch değeri yalnızca kullanıcı yazmayı bıraktıktan 300ms sonra güncellenir ve gereksiz API çağrılarını azaltır.

İlgili Teknoloji

React

İlgili Parçacıklar

React useLocalStorage HookTypeScript

React useFetch HookTypeScript

React useClickOutside HookTypeScript

React Toggle BileşeniTypeScript

Aklınızda Bir Proje mi Var?

Fikrinizi nasıl hayata geçirebileceğimizi konuşalım. İlk konseptten üretime hazır ürüne kadar — yanınızdayız.

veya ücretsiz görüşme ayarlayın