React计数器count未按预期增长？点击两次后数值异常问题

问题现象 #

点击两次Increase按钮后，count变为2，但5秒后count并未按预期只增加1（变为3），而是出现先减1再增加2的异常波动。

原代码 #

const Counter=()=>{
    const [count, setCount]=useState(0)
    setTimeout(()=>{
        setCount(count+1)
    }, 5000)

    return(<>
        <button onClick={()=>setCount(()=>count+1)}>Increase</button>
        <h2>{count}</h2>
    </>)
}

问题根源 #

1. 定时器重复创建未清理：组件每次渲染（包括状态更新后的重渲染）都会执行setTimeout，导致多个定时器在5秒后依次触发。
2. 闭包陷阱导致状态值过期：定时器回调和按钮点击的更新函数都捕获了当前渲染周期的count闭包值，而非最新状态。比如初始渲染时的定时器，回调里的count永远是0，5秒后触发时会把当前最新的count（比如2）强制改成1，后续其他定时器再基于各自闭包的旧值更新，就出现了异常波动。

修复方案 #

const Counter=()=>{
    const [count, setCount]=useState(0)

    // 用useEffect创建单次定时器，并在组件更新/卸载时清理
    useEffect(() => {
        const timer = setTimeout(()=>{
            // 使用函数式更新，基于最新状态计算
            setCount(prevCount => prevCount + 1)
        }, 5000)
        return () => clearTimeout(timer)
    }, []) // 空依赖数组，仅在组件挂载时执行一次

    return(<>
        <button onClick={()=>{
            // 同样用函数式更新，确保基于最新状态
            setCount(prevCount => prevCount + 1)
        }}>Increase</button>
        <h2>{count}</h2>
    </>)
}

修复说明 #

• useEffect+清理函数：通过空依赖数组的useEffect，确保定时器仅在组件挂载时创建一次，重渲染或卸载时清理旧定时器，避免重复触发。
• 函数式状态更新：setCount接收一个函数，参数是React传入的最新状态值prevCount，这样更新逻辑始终基于当前最新状态，彻底避免闭包陷阱导致的过期值问题。

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