Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
React hook: useDebounce
import { useState, useEffect } from 'react'
const useDebounce = (value, delay) => {
// State and setters for debounced value
const [debouncedValue, setDebouncedValue] = useState(value)
() => {
// Update debounced value after delay
const handler = setTimeout(() => {
}, delay)
// Cancel the timeout if value changes (also on delay change or unmount)
// This is how we prevent debounced value from updating if value is changed ...
// .. within the delay period. Timeout gets cleared and restarted.
return () => {
[value, delay] // Only re-call effect if value or delay changes
return debouncedValue
export default useDebounce
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment