为何useEffect在依赖[count == 2]时，count为3也会触发执行？

下面的代码运行后，useEffect会依次输出count的0、2、3值。初始渲染输出0符合预期，但按逻辑本该仅在count等于2时触发副作用，可count为3时也执行了：

useEffect(() => {
   console.warn(count);
}, [count == 2]);

问题根源 #

useEffect的依赖数组是追踪值的变化，这里你传入的是count == 2的计算结果——一个布尔值：

• 初始渲染时，count=0，count==2为false，触发初始执行，输出0；
• 当count变为2时，count==2变为true，依赖值从false变true，触发执行，输出2；
• 当count变为3时，count==2变回false，依赖值从true变false，再次发生变化，因此又触发执行，输出3。

正确写法 #

如果想仅在count等于2时执行副作用逻辑，应该把count放入依赖数组，在副作用内部做条件判断：

useEffect(() => {
  if (count === 2) {
    console.warn(count);
  }
}, [count]);

这样只有count变化时才会进入副作用函数，内部判断满足条件后才执行输出，只会在count=2时触发预期逻辑。

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