Search…
useThrottle
React hook for throttled values and functions.
Source code is hosted on GitHub
yarn
npm
yarn add @corets/use-throttle
npm install --save @corets/use-throttle

useThrottle()

This hook is built on top of throttle() from lodash and accepts the same arguments.
Example of a throttled value:
import React, { useState, useEffect } from "react"
import { useThrottle } from "@corets/use-throttle"
const Example = () => {
const [input, setInput] = useState("")
const throttledInput = useThrottle(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, [throttledInput])
return (
<input type="text" onChange={handleChange} />
)
}
Example of a throttled function:
import React, { useState, useEffect } from "react"
import { useThrottle } from "@corets/use-throttle"
const Example = () => {
const [input, setInput] = useState("")
const handleSearch = useThrottle((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 throttled
handleSearch(e.target.value)
}
return (
<input type="text" onChange={handleChange} />
)
}
This hook accepts a third argument, identical to the one expected by the throttle() function from lodash.
Copy link