Throttle

Docs

Throttle

Throttle computationally expensive operations

About

The useThrottle hook controls execution frequency in a React application. By accepting a value and an optional interval, it ensures the value is updated at most every specified interval milliseconds. This is useful for limiting API calls, reducing UI updates, or mitigating performance issues by throttling expensive operations.

Parameters

Name	Type	Description
value	any	The value to throttle.
interval	number	(Optional) The interval in milliseconds. Default: 500ms.

Return Values

Name	Type	Description
throttledValue	any	The throttled value that is updated at most once per interval.

Installation

Run the following command:

npx scriptkavi-hooks@latest add throttle

Usage

import { useThrottle } from "@/hooks/throttle"

import * as React from "react"
 
export default function App() {
  const [val, setVal] = React.useState("")
  const throttledValue = useThrottle(val)
 
  return (
    <section>
      <h1>useThrottle</h1>
      <input
        placeholder="Type some text"
        style={{ background: "var(--charcoal)" }}
        type="text"
        value={val}
        onChange={(e) => {
          setVal(e.target.value)
        }}
      />
      <p>Val: {val}</p>
      <p>Throttled: {throttledValue}</p>
    </section>
  )
}

Set Toggle