Skip to content

Instantly share code, notes, and snippets.

@codinronan
Created November 29, 2020 03:15
Show Gist options
  • Save codinronan/3f691e7203d30a1dd43bddf00e060014 to your computer and use it in GitHub Desktop.
Save codinronan/3f691e7203d30a1dd43bddf00e060014 to your computer and use it in GitHub Desktop.
React hook: useDebounce
import { useState, useEffect } from 'react'
const useDebounce = (value, delay) => {
// State and setters for debounced value
const [debouncedValue, setDebouncedValue] = useState(value)
useEffect(
() => {
// Update debounced value after delay
const handler = setTimeout(() => {
setDebouncedValue(value)
}, 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 () => {
clearTimeout(handler)
}
},
[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