useThrottle

React hook for throttled values and functions.

Source code is hosted on GitHub

yarn

yarn add @corets/use-throttle

npm

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.