React中Lodash debounce失效问题排查与解决

• 仅从Lodash导入debounce函数：

import debounce from "lodash/debounce"

• 为异步函数fetchUsers创建防抖版本：

const debouncedFetchUsers = debounce(fetchUsers, 5000)

• 在inputValue变化时，通过useEffect调用防抖函数：

useEffect(() => {
    if (inputValue.length > 2) {
        debouncedFetchUsers(inputValue);
    } else {
        setUsers([]);
    }
}, [inputValue, debouncedFetchUsers]);

此时遇到两个问题：

• 快速输入5个字符时，fetchUsers会被调用3次，每次输入后延迟5秒触发，未达到防抖只执行最后一次的预期
• 将debouncedFetchUsers加入useEffect依赖数组后，出现无限重渲染循环，说明该函数每次渲染都会被重新创建

尝试参考方案解决：用useCallback包裹防抖函数，但问题未解决：

const debouncedFetchUsers = useCallback(
    debounce(fetchUsers, 5000),
    [fetchUsers]
);

最终解决：将fetchUsers也用useCallback包裹，问题彻底解决。完整的fetchUsers函数如下：

const fetchUsers = useCallback(async (needle) => {
    console.log(`FetchingUsers...${needle}`);
    setIsLoading(true);
    const response = await fetch(`http://localhost:7000/users?needle=${needle}`);
    const data = await response.json();
    setUsers(data);
    setIsLoading(false);
    console.log(`DONE FetchingUsers...${needle}`);
}, []);

内容的提问来源于stack exchange，提问作者lowcrawler