Hook useDebounce

info

Hook allows you to debounce any fast changing value. The debounced value will only reflect the latest value when the useDebounce hook has not been called for the specified time period.

Arguments

Arguments	Type	Meaning	Possible values
value	string / number	Value for debounce	any of type
delay	number	Delay to apply changes if no new values	from 0 to any number

---

Return

Element	Type	Meaning
debouncedValue	any	New value

---

Example

const App = () => {
  const [searchTerm, setSearchTerm] = useState('')
  const debouncedSearchTerm = useDebounce(searchTerm, 500)

  return (
    <input
      placeholder="Search Marvel Comics"
      onChange={event => setSearchTerm(event.target.value)}
    />
  )
}