React防抖优化：输入停止1秒后更新状态的实现问题求助

原实现的核心问题 #

• 闭包陷阱：useEffect 依赖为空数组，内部 setInterval 始终引用组件初始渲染时的 call、currentIndex、editors 状态，状态更新后无法获取最新值，导致逻辑混乱。
• 未清理重复定时器：每次输入都会创建新的 setTimeout，旧定时器未被清除，会多次触发 setCall(true)，引发重复状态更新。
• 状态更新依赖旧快照：setEditors({ ...editors, [index]: e }) 直接使用当前渲染周期的 editors 状态，频繁输入时可能无法合并最新变更。

修复后的实现思路 #

1. 使用 useRef 保存防抖定时器ID，每次输入时清除旧定时器，重新计时，确保只有用户停止输入1秒后才执行更新。
2. 移除冗余的 call 状态，直接在防抖定时器中调用 Work.Description。
3. 状态更新采用函数式写法，确保获取最新的状态快照。
4. 在组件卸载时清理定时器，避免内存泄漏。

修复后的代码 #

import { Item } from '../..';
import { WorkItemValidation } from '../../../../../utils/Validation';
import { Date, Input } from '../../../Shared';
import { Editor } from '../../..';
import { Items } from '../Components';
import { Container, Liner, Linerier } from './Components'
import { useState, useEffect, useRef } from 'react';
import { Employment as Work } from '../../../../../utils/operations/Resume';

const Employment: any = (props: any) => {
    const [editors, setEditors] = useState({});
    const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);

    const handleDescription = (e: any, index: number) => {
        // 函数式更新，确保拿到最新的editors状态
        setEditors(prev => ({ ...prev, [index]: e }));
        
        // 清除之前的定时器，重置防抖计时
        if (debounceTimerRef.current) {
            clearTimeout(debounceTimerRef.current);
        }

        // 设置新的定时器，停止输入1秒后执行更新
        debounceTimerRef.current = setTimeout(() => {
            Work.Description(props, index, editors[index]);
        }, 1000);
    }

    // 组件卸载时清理定时器
    useEffect(() => {
        return () => {
            if (debounceTimerRef.current) {
                clearTimeout(debounceTimerRef.current);
            }
        };
    }, []);

    return (
        <Container>
            <Items>
                {props.resume.employmentHistory.positions.map((position: any, index: number) => (
                    <Editor
                        key={index} // 增加key，避免React列表渲染警告
                        label="Description"
                        value={position.description || ''}
                        onChange={(e) => handleDescription(e, index)}
                    />
                ))}
            </Items>
        </Container>
    )
}

export default Employment;

关键优化点 #

• 防抖逻辑简化：通过 useRef 管理定时器，避免了冗余的状态变量和 setInterval 带来的闭包问题。
• 状态更新可靠性：setEditors 使用函数式更新，确保每次都基于最新状态进行修改，避免状态丢失。
• 内存泄漏防护：组件卸载时清理定时器，防止残留定时器触发已卸载组件的逻辑。
• 列表渲染优化：给 Editor 增加 key 属性，符合React列表渲染的最佳实践。

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