React使用setInterval实现计数器到限重置的性能优化问题

首先你的第二种实现思路是合理的：利用setState的函数式更新形态获取最新状态，避免将状态变量加入useEffect依赖触发定时器反复销毁重建，但现有代码存在两个问题：

1. 逻辑bug：三元表达式中你写的是active == 0，这是比较运算而非返回值，执行后active会被赋值为布尔值，无法实现重置为0的需求
2. 依赖缺失：你把useEffect的依赖设为空数组，当arr的长度发生变化时，定时器内获取的arr.length永远是初始渲染时的旧值，导致重置阈值不更新

最优实现方案 #

useEffect(() => {
  const timer = setInterval(() => {
    setActive((prevActive) => prevActive === arr.length - 1 ? 0 : prevActive + 1)
  }, 3000)
  return () => clearInterval(timer)
}, [arr.length])

方案优势 #

• 仅当arr.length发生变化时才会销毁重建定时器，普通active状态更新完全不会触发定时器变动，完全避免了不必要的性能开销
• 函数式更新直接读取上一轮最新的active状态，不存在闭包陷阱，也不需要将active加入依赖
• 完全符合React Hook的依赖校验规则，不会出现ESLint警告

如果你的轮播间隔3000是可配置的动态值，只需要把它也加入useEffect的依赖数组即可。

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