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. From initial concept to production-ready product — we've got you covered.