useThrottleFn

React hook that invokes a function and then delays subsequent function calls until after wait milliseconds have elapsed since the last time the throttled function was invoked.

The third argument is the array of values that the throttle depends on, in the same manner as useEffect. The throttle timeout will start when one of the values changes.

React 钩子，它调用一个函数然后延迟后续函数调用，直到自上次调用了受限制函数后经过等待的毫秒数。

第三个参数是节流所依赖的值，是一个数组，与useEffect的方式相同。 当其中一个值发生变化时，将会开始节流超时。

Usage

  1. import React, { useState } from 'react';
  2. import { useThrottleFn } from 'react-use';
  4. const Demo = () => {
  5.   const [status, setStatus] = React.useState('Updating stopped');
  6.   const [value, setValue] = React.useState('');
  7.   const [throttledValue, setThrottledValue] = React.useState('');
  9.   useThrottleFn(
  10.     () => {
  11.       setStatus('Waiting for input...');
  12.       setThrottledValue(value);
  13.     },
  14.     2000,
  15.     [value]
  16.   );
  18.   return (
  19.     <div>
  20.       <input
  21.         type="text"
  22.         value={value}
  23.         placeholder="Throttled input"
  24.         onChange={({ currentTarget }) => {
  25.           setStatus('Updating stopped');
  26.           setValue(currentTarget.value);
  27.         }}
  28.       />
  29.       <div>{status}</div>
  30.       <div>Throttled value: {throttledValue}</div>
  31.     </div>
  32.   );
  33. };

Reference

  1. useThrottleFn(fn, ms: number, args: any[]);