为何依赖useState的setState会触发useEffect？求解

首先明确：useState返回的setState函数引用确实是稳定不变的，所以理论上useEffect(() => {console.log('triggers')}, [setState])和useEffect(() => {...}, [])的表现完全一致——仅在组件挂载时执行一次，后续不会因依赖变化触发。

如果你的代码里useEffect被意外触发，大概率是以下原因：

• React 18开发环境的严格模式：
  React 18在开发模式下启用严格模式时，会对组件进行两次挂载/卸载的模拟（目的是提前检测组件中未清理的副作用问题）。这时候useEffect会执行两次，但这和setState的引用无关——哪怕你使用空依赖数组，同样会触发两次。生产环境下这个模拟逻辑会被移除，useEffect只会执行一次。

• 组件被重复挂载/卸载：
  如果你的组件在应用中因路由切换、条件渲染等场景被卸载后重新挂载，useEffect会在每次挂载时执行，这同样和setState的引用没有关系。

你可以通过以下方式验证：

1. 移除根组件外层的<StrictMode>标签，关闭严格模式后观察useEffect的执行次数。
2. 在组件函数内部添加日志（比如console.log('component rendered')），确认组件是否被重复创建。

内容的提问来源于stack exchange，提问作者Michael Falck Wedelgård