Comment on page
useDebounce

React hook for debounced values and functions.
Source code is hosted on GitHub​
yarn
npm
yarn add @corets/use-debounce
npm install --save @corets/use-debounce
useDebounce()
This hook is built on top of debounce() from lodash and accepts the same arguments.
Example of a debounced value:
import React, { useState, useEffect } from "react"
import { useDebounce } from "@corets/use-debounce"
​
const Example = () => {
  const [input, setInput] = useState("")
  const debouncedInput = useDebounce(input, 300)
  
  const handleSearch = () => {
    // fetch some data based on input...
  }
  
  const handleChange = (e) => setInput(e.target.value)
  
  // react to changes of the debounced input
  useEffect(handleSearch, [debouncedInput])
  
  return (
    <input type="text" onChange={handleChange} />
  )
}
Example of a debounced function:
import React, { useState, useEffect } from "react"
import { useDebounce } from "@corets/use-debounce"
​
const Example = () => {
  const [input, setInput] = useState("")
  
  const handleSearch = useDebounce((query: string) => {
    // you can also access variable "input" directly, if you want to
    // fetch some data based on input...
  }, 300)
  
  const handleChange = (e) => {
    setInput(e.target.value)
    // trigger search immediately, this call will be debounced
    handleSearch(e.target.value)
  }
  
  return (
    <input type="text" onChange={handleChange} />
  )
}
This hook accepts a third argument, identical to the one expected by the debounce() function from lodash.
Hooks - Previous
useAction
Next - Hooks
useThrottle
Last modified 2yr ago