react组件中debounce防抖功能失效问题解决办法

一、问题背景

import { debounce } from 'lodash';  
const [searchKey, setSearchKey] = useState('');
// 防抖函数
  const debounceList = debounce(getList, 500);

<Input
   value={searchKey}
   onChange={(e) => {
              setSearchKey(e.target.value);
             }}
   className={`${style.search}`}
   placeholder="请输入关键词"
/>

页面上有一个搜索框，searchKey是通过useState定义的响应式数据，onChange事件调用了setSearchKey方法，那么只要输入变化时，组件就会重新渲染从而重新生成新的防抖函数debounceList。最终造成防抖功能失效。

二、解决办法

使用 useRef 定义searchKey数据，使其成为非响应式数据，通过 searchKey.current 获取和修改值：

// 搜索关键字
  const searchKey = useRef('');
// 修改数据
const setSearchKey = (val) => {
    searchKey.current = val;
  };

<Input
   onChange={(e) => {
              setSearchKey(e.target.value);
             }}
   className={`${style.search}`}
   placeholder="请输入关键词"
/>

三、拓展

关于处理防抖失效的问题，可能有人会想到使用 useCallback 来缓存 debounce 防抖函数，比如你可能会这样写：

const [searchKey, setSearchKey] = useState('');
const debounceList = useCallback(debounce(getList, 500), []);

这样防抖功能虽然生效了，但是你无法获取最新的searchKey值；如果想获取最新的searchKey值，就要把searchKey加到后面的 [ ] 中，但是这样防抖又失效了。所以只能采用useRef 定义非响应式数据来解决。