React中使用useDeferredValue重构搜索防抖dispatch逻辑

我在应用中使用Redux管理状态，需求是用户在搜索面板输入查询时，延迟dispatch action，仅在用户停止输入后才向API发送请求。目前我已用debounce函数实现该功能，但希望改用useDeferredValue重构，却遇到了实现困难。以下是当前的代码实现：

import { useState, useMemo } from 'react';
import { FormRow, FormRowSelect } from '.';
import Wrapper from '../assets/wrappers/SearchContainer';
import { useSelector, useDispatch } from 'react-redux';
import { handleChange, clearFilters } from '../features/allJobs/allJobsSlice';

export default function SearchContainer() {
    const { isLoading, search, searchStatus, searchType, sort, sortOptions } =
        useSelector((store) => store.allJobs);
    const { jobTypeOptions, statusOptions } = useSelector((store) => store.job);
    const dispatch = useDispatch();
    const [localSearch, setLocalSearch] = useState('');

    function onHandleSearch(e) {
        dispatch(handleChange({ name: e.target.name, value: e.target.value }));
    }

    function omHandleSubmit(e) {
        e.preventDefault();
        dispatch(clearFilters());
    }

    const debounce = () => {
        let timeoutID;

        return (e) => {
            setLocalSearch(e.target.value);
            clearTimeout(timeoutID);
            timeoutID = setTimeout(() => {
                dispatch(handleChange({ name: e.target.name, value: e.target.value }));
            }, 1000);
        };
    };

    const optimizedDebounce = useMemo(() => debounce(), []);

    return (
        <Wrapper>
            <form className='form'>
                <h4>search form</h4>
                <div className='form-center'>
                    <FormRow
                        type='text'
                        name='search'
                        value={localSearch}
                        handleChange={optimizedDebounce}
                    />
                    <FormRowSelect
                        labelText='status'
                        name='searchStatus'
                        value={searchStatus}
                        handleChange={onHandleSearch}
                        list={['all', ...statusOptions]}
                    />
                    <FormRowSelect
                        labelText='type'
                        name='searchType'
                        value={searchType}
                        handleChange={onHandleSearch}
                        list={['all', ...jobTypeOptions]}
                    />
                    <FormRowSelect
                        name='sort'
                        value={sort}
                        handleChange={onHandleSearch}
                        list={sortOptions}
                    />
                    <button
                        className='btn btn-block btn-danger'
                        disabled={isLoading}
                        onClick={omHandleSubmit}
                    >
                        clear filters
                    </button>
                </div>
            </form>
        </Wrapper>
    );
}

要使用useDeferredValue实现搜索输入的延迟dispatch，核心是利用它延迟更新非紧急状态的特性，配合useEffect触发Redux action。具体修改步骤如下：

1. 移除原有debounce逻辑：删掉debounce函数和optimizedDebounce相关代码。
2. 简化输入框实时更新：让输入框直接更新本地状态，无需防抖处理。
3. 创建延迟搜索值：用useDeferredValue包裹本地搜索状态，得到滞后更新的延迟值。
4. 监听延迟值触发dispatch：通过useEffect监听延迟值的变化，当它更新时再dispatch action到Redux。

修改后的完整代码：

import { useState, useDeferredValue, useEffect } from 'react';
import { FormRow, FormRowSelect } from '.';
import Wrapper from '../assets/wrappers/SearchContainer';
import { useSelector, useDispatch } from 'react-redux';
import { handleChange, clearFilters } from '../features/allJobs/allJobsSlice';

export default function SearchContainer() {
    const { isLoading, search, searchStatus, searchType, sort, sortOptions } =
        useSelector((store) => store.allJobs);
    const { jobTypeOptions, statusOptions } = useSelector((store) => store.job);
    const dispatch = useDispatch();
    const [localSearch, setLocalSearch] = useState('');
    
    // 创建延迟更新的搜索值
    const deferredSearch = useDeferredValue(localSearch);

    // 实时更新本地输入状态
    function handleLocalSearch(e) {
        setLocalSearch(e.target.value);
    }

    function onHandleSearch(e) {
        dispatch(handleChange({ name: e.target.name, value: e.target.value }));
    }

    function omHandleSubmit(e) {
        e.preventDefault();
        dispatch(clearFilters());
    }

    // 监听延迟搜索值变化，触发Redux action
    useEffect(() => {
        // 避免与Redux中已有值重复dispatch
        if (deferredSearch !== search) {
            dispatch(handleChange({ name: 'search', value: deferredSearch }));
        }
    }, [deferredSearch, dispatch, search]);

    return (
        <Wrapper>
            <form className='form'>
                <h4>search form</h4>
                <div className='form-center'>
                    <FormRow
                        type='text'
                        name='search'
                        value={localSearch}
                        handleChange={handleLocalSearch}
                    />
                    <FormRowSelect
                        labelText='status'
                        name='searchStatus'
                        value={searchStatus}
                        handleChange={onHandleSearch}
                        list={['all', ...statusOptions]}
                    />
                    <FormRowSelect
                        labelText='type'
                        name='searchType'
                        value={searchType}
                        handleChange={onHandleSearch}
                        list={['all', ...jobTypeOptions]}
                    />
                    <FormRowSelect
                        name='sort'
                        value={sort}
                        handleChange={onHandleSearch}
                        list={sortOptions}
                    />
                    <button
                        className='btn btn-block btn-danger'
                        disabled={isLoading}
                        onClick={omHandleSubmit}
                    >
                        clear filters
                    </button>
                </div>
            </form>
        </Wrapper>
    );
}

关键说明 #

• useDeferredValue的作用是让deferredSearch的值滞后于localSearch，React会优先完成当前渲染（比如输入框的实时更新），在用户停止输入、浏览器空闲时再更新deferredSearch。
• 搭配useEffect监听deferredSearch的变化，确保只有当延迟值稳定后才向Redux发送action，避免频繁触发API请求。
• 与传统debounce的区别：useDeferredValue没有固定的延迟时间，它基于React的调度机制自动调整，更贴合React的渲染优先级；如果需要精确的延迟时长（比如固定1秒），传统debounce依然是更直接的选择。

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