React中Lodash debounce失效问题排查及代码优化咨询

问题描述 #

我尝试从数据库中搜索产品，使用lodash's debounce在指定时间后发送请求。目前遇到的问题是：请求确实会在指定时间后发送，但每个字符输入后，间隔指定时间都会触发一次请求。我希望仅触发一次请求，且是针对完整输入内容的，而非每个字符。请问我哪里出错了？另外，也欢迎对这段代码提出优化建议。

相关代码 #

SearchBar.js #

function SearchBar() {
    const [searchText, setSearchText] = useState("");
    const searchResultsRef = useRef(null);
    const dispatch = useDispatch()

    const sendRequest = (searchText) => {
        dispatch(getSearchedCategories(searchText))
    };
      
    const debouncedSendRequest = debounce(sendRequest, 5000);
      
    const handleInputChange = (event) => {
        const inputValue = event.target.value.toLowerCase();
        if (inputValue === "") {
            setSearchText("");
        } else {
            setSearchText(inputValue);
            if(inputValue.trim().length > 2) {
                debouncedSendRequest(inputValue.trim())
                setShowSearchResult(true)
            }
        }
    };

    const hideSearchResults = () => {
        setShowSearchResult(false);
    }

    useEffect(() => {
        const handleClickOutside = (event) => {
            if (searchResultsRef.current && !searchResultsRef.current.contains(event.target)) {
                hideSearchResults();
            }
        };
        // add event listener to detect clicks outside of the search component
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [searchResultsRef]);

    return (
        <div className="searchContainer">
            <div className="searchInputs">
                <input
                    type="search"
                    placeholder="Search for a product"
                    value={searchText}
                    onChange={handleInputChange}
                />
                ...
            </div>
            
            ...
        </div>
    );
}

action.js #

export const getSearchItem = (searchedItem) => async (dispatch) => {
    try {
        ...
        const { data } = axios.get(// my api)
        ...
    } catch(error) {
        ...
    }
}

错误原因 #

问题核心是：每次组件重新渲染（比如调用setSearchText更新状态时），都会重新创建一个新的debouncedSendRequest防抖函数实例。这意味着输入每个字符后，都会生成独立的防抖定时器，它们之间不会互相取消，所以每个字符对应的定时器到时间后都会触发请求，完全达不到防抖的效果。

解决方法 #

要让防抖函数保持唯一实例，可通过useCallback或useRef缓存：

方法1：使用useCallback缓存防抖函数 #

import { useCallback } from 'react';
import { debounce } from 'lodash';

function SearchBar() {
    // ... 其他状态和ref

    const sendRequest = (searchText) => {
        dispatch(getSearchedCategories(searchText))
    };
      
    // 用useCallback缓存，依赖项为空确保只创建一次
    const debouncedSendRequest = useCallback(
        debounce(sendRequest, 500), // 建议把防抖时间改成300-500ms，5秒太长
        []
    );

    // ... 其他逻辑
}

方法2：使用useRef保存防抖实例 #

import { useRef } from 'react';
import { debounce } from 'lodash';

function SearchBar() {
    // ... 其他状态和ref
    const debouncedSendRequestRef = useRef();

    useEffect(() => {
        // 组件挂载时创建一次防抖函数实例
        debouncedSendRequestRef.current = debounce((searchText) => {
            dispatch(getSearchedCategories(searchText));
        }, 500);

        // 组件卸载时清理防抖定时器
        return () => {
            debouncedSendRequestRef.current.cancel();
        };
    }, [dispatch]);

    const handleInputChange = (event) => {
        const inputValue = event.target.value.toLowerCase();
        setSearchText(inputValue);
        
        if(inputValue.trim().length > 2) {
            // 调用ref里的防抖实例
            debouncedSendRequestRef.current(inputValue.trim());
            setShowSearchResult(true);
        } else {
            setShowSearchResult(false);
        }
    };

    // ... 其他逻辑
}

优化建议 #

1. 调整防抖时间：5秒等待时间过长，用户体验差，建议设置为300-500ms，平衡请求频率和响应速度。
2. 处理输入为空场景：输入清空时，除了重置searchText，还要关闭搜索结果弹窗，并调用debounce.cancel()取消等待中的请求。
3. 避免重复请求：记录上一次请求的关键词，若当前输入与上一次相同，不再触发请求。
4. 分离请求触发逻辑：把防抖请求触发逻辑放到useEffect中，与输入处理逻辑分离，代码更清晰：

   useEffect(() => {
       const trimmedText = searchText.trim();
       if (trimmedText.length > 2) {
           debouncedSendRequest(trimmedText);
           setShowSearchResult(true);
       } else {
           setShowSearchResult(false);
       }
       // 组件卸载或文本变化时取消之前的防抖请求
       return () => debouncedSendRequest.cancel();
   }, [searchText, debouncedSendRequest]);
   

5. 组件卸载清理定时器：防止组件卸载后仍触发请求，避免不必要的错误，上述两种解决方法均已包含该逻辑。

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