A hook that delays updating a value until a specified time has passed since the last change.
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 useDebounceUse it to debounce search inputs: const debouncedSearch = useDebounce(searchTerm, 300). The debouncedSearch value only updates 300ms after the user stops typing, reducing unnecessary API calls.
Let's discuss how we can bring your idea to life. With 50+ projects delivered, we take you from first plan to a production-ready product, and we offer custom software development with fixed-price quotes. Book a free consultation, no commitment.