React中useEffect搭配setInterval计数到100不停止问题如何解决

代码问题出在闭包捕获特性：由于useEffect的依赖数组为空，该Effect仅会在组件首次挂载时执行一次，回调里捕获的progress永远是首次渲染时的初始值（一般为0），所以progress === 100的判断条件永远无法触发，interval定时器不会被正常清除，计数就会一直上涨。

直接将停止判断放在setProgress的函数式更新回调中即可，这里可以拿到最新的进度值：

useEffect(() => {
    const interval = setInterval(() => {
        setProgress((prevProgress) => {
            const nextProgress = prevProgress + 1;
            // 拿到最新值后判断是否停止
            if (nextProgress === 100) {
                clearInterval(interval);
            }
            return nextProgress;
        });
    }, 16);
    return () => clearInterval(interval);
}, []);
console.log(progress);

也可以选择把progress加入useEffect的依赖数组实现需求，但这种方案每次进度更新都会销毁旧定时器再创建新定时器，性能比上述方案差，不推荐使用。

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