useDebounce
React hook for debounced values and functions.
yarn
npm
yarn add @corets/use-debounce
npm install --save @corets/use-debounce
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.
Last modified 1yr ago