React在Hooks中实现Input防抖中遇到的问题

项目场景：

：
在项目中，要实现当在input框中输入时，然后作为参数向后端发送请求数据。如果直接监听onChange发送请求就会频繁的发送请求。但是业务场景，我们只需要在最后一次发送请求就可以了。所以要实现防抖。

---

实现

我们可以使用lodash中debounced实现

```javeScript
//先引入
import { debounce } from "lodash";
const [userName,setuserName] = useState("");

const fetchSearch = (e)=>{
   //发送请求
}

const load = debounce((e) => fetchSearch(e), 500),
 
const handleUserNameChange = (e)=>{
   setuserName(e.target.value);
   load(v.target.value)
}
<Input
     value={userName}
     onChange={handleUserNameChange}
 ></Input>

也可以自己封装一个防抖函数

const debounce = (func, wait = 800) => {
  let timeout;
  return function (e) {
    clearTimeout(timeout); // 每次触发时先清除上一次的定时器,然后重新计时
    timeout = setTimeout(() => {
      func(e);
    }, wait); 多少ms后,执行函数 
  };

---

遇到的问题：

上面的情况就单纯的是一个input组件。但是如果input再父组件中包裹。父组件更新，子组件更新，由于是Hooks组件，相当于重新执行了函数组件，那也就是每次又创建了一个新的debounce 函数。那就会让我们的防抖失效。所以我们需要将函数缓存。

---

解决方案：

const load = useCallback(
    debounce((e) => fetchSearch(e), 500),
    []
);

这样就得到了解决。