React组件重渲染时useState返回的setState是否会被重新创建？

结论非常明确：useState 返回的状态设置函数（即示例中的setState）不属于每次重渲染会重新创建的函数，它的引用在组件全生命周期内保持稳定，不需要额外用useCallback做记忆化处理。

规则边界说明 #

你提到的「组件内部未被useCallback包裹的函数会在每次渲染时重新创建」，仅适用于你在组件函数作用域内手动定义的函数，比如示例里的两个函数确实符合每次重渲染重建的特征：

• 显式定义的foo = () => console.log("Hello Word")
• 按钮onClick上写的内联箭头函数() => setState(!state)

而useState返回的更新函数是React内部在组件首次挂载时就生成的固定引用，后续每一次组件重渲染，useState返回的第二个值永远指向同一个函数，不会生成新的引用。这个设计是React官方明确保证的行为，你不需要担心它的引用变化带来的多余重渲染问题。

补充：类似的稳定引用还有useReducer返回的dispatch函数，同样是全生命周期引用稳定，不需要额外记忆化。日常开发里写useCallback(() => setState(xxx), [setState])属于完全多余的写法，不会带来任何性能收益。

你可以用如下方式自行验证引用稳定性：

import { useState, useRef, useEffect } from "react";

export default function App() {
  const [state, setState] = useState(true);
  // 存储首次渲染拿到的setState引用
  const setStateRef = useRef(null);
  if (!setStateRef.current) {
    setStateRef.current = setState;
  }

  useEffect(() => {
    // 每次重渲染对比引用是否相等
    console.log("两次setState是否为同一个引用：", setState === setStateRef.current);
  });

  return (
    <div>
      <button onClick={() => setState(!state)}>Change state</button>
    </div>
  );
}

不管你点击多少次按钮触发重渲染，控制台永远会打印true，就能证明setState的引用始终没有变化。

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