React中useState的setState setter函数是否会发生变化？

React v16、v18的实际表现 #

• 从React v16.8（Hooks正式推出版本）到v18，useState返回的setter函数（比如setState）始终保持同一个引用，不会在组件每次重渲染时生成新的函数对象。

官方规范说明 #

React官方后续明确了：useState、useReducer这类内置Hook返回的setter函数是稳定的，不会随组件重渲染而变化。这意味着你完全可以把它们从useEffect、useCallback的依赖数组中省略——当然如果写进去也没问题，因为引用不会变，不会触发不必要的回调执行。

对你的业务场景的影响 #

看你给出的window消息订阅示例：

useEffect(() => {
  const messageListener = () => {
    // 解析消息，决定是否修改状态
    setState(...); // 修改组件状态
  }
  window.addEventListener('message', messageListener, false);

  return () => {
    window.removeEventListener('message', messageListener, false);
  }
}, [setState])

因为setState的引用稳定，这个useEffect只会在组件挂载时执行一次订阅，卸载时执行清理，不会因为setState变化重复执行。甚至你可以把setState从依赖数组中移除，效果完全一致，代码还更简洁。

额外注意点 #

• 这个稳定性是React Hooks的既定设计，从Hooks推出至今没有改变，v18也延续了这个逻辑。
• 只有在自定义Hook中手动封装的setter函数才可能出现不稳定的情况，如果是直接返回原生useState的setter，就不用操心这个问题。

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