useEffect触发次数疑问：同一方法两次状态更新为何只触发一次？

你的理解确实存在误区，核心原因是React的批量状态更新机制：

• React在合成事件处理函数（比如你的handleSearch）、生命周期函数等场景中，会将多次状态更新操作合并为一次重渲染，而非每次setState都触发单独渲染。
• 在你的代码里，handleSearch中调用的setMonthVal（当key为SearchInfo.MONTH时）和setSearchKey会被React批量处理，组件只会完成一次重渲染。
• useEffect的执行时机是在组件完成渲染之后，每次渲染后检查依赖数组的变化。因为组件只渲染了一次，所以useEffect只会执行一次，而不是两次。

如果想验证这一点，可以将状态更新操作脱离React的批量更新机制（比如放到setTimeout中），此时每次setState都会触发独立渲染，useEffect也会触发两次：

const handleSearch = (key: searchType, monthVal?: number) => {
  if (key === SearchInfo.MONTH) {
    setTimeout(() => setMonthVal(monthVal), 0);
  }
  setTimeout(() => setSearchKey(key as searchType), 0);
};

不过这种做法仅用于验证原理，实际开发中不推荐，因为额外的渲染会降低性能，React的批量更新本身是一种性能优化手段。

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