React中useEffect使用setInterval为何需要返回清理函数？

问题1：为什么useEffect中使用setInterval需要返回清理函数？ #

你的这段代码里useEffect的依赖项是percentage，每次percentage发生变化时，整个useEffect的回调都会重新执行一次。

• 如果不写清理函数，每次percentage更新都会新建一个setInterval定时器，旧的定时器不会被销毁，相当于同时开了N个定时器在同时给percentage加1，最终会出现数值跳速越来越快、逻辑完全混乱的问题，这也是你之前功能无法正常运行的核心原因。
• 就算你的useEffect依赖项是空数组（仅在组件挂载时执行一次），也需要清理函数：否则组件卸载后定时器还会在后台运行，还会尝试更新已经销毁的组件的状态，触发React的内存泄漏警告。

问题2：为什么必须返回函数形式，不能直接执行clearInterval(timer)？ #

useEffect的返回值是专门设计给React的延迟调用清理函数，React只会在两个时机调用这个返回的函数：

1. 下一次useEffect回调执行之前
2. 组件卸载的时候
   如果你直接在useEffect里写clearInterval(timer)，相当于你刚创建完定时器，立刻就把它清除了，定时器一次都不会触发，完全达不到定时更新的效果。只有把清理逻辑包裹在函数里返回给React，React才会在正确的时机执行清理逻辑，不会提前执行。

补充优化提示：你代码里setPercentage的回调中判断percentage === 99，建议改成用回调入参prevPerc判断，也就是if(prevPerc === 99)，可以避免闭包捕获旧值的潜在问题。

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