useDebounce

React hook for debounced values and functions.

Source code is hosted on GitHub

yarn

yarn add @corets/use-debounce

npm

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.