为何useState钩子会调用作为初始状态传入的函数引用？

你发现的这个“奇怪行为”其实并非未被文档记录——它是React useState钩子特意设计的惰性初始状态功能，主要是为了优化性能。

为什么React会调用传入的函数？ #

当你给useState传入一个函数作为初始参数时，React会把这个函数当作惰性初始化函数：它只会在组件的初始渲染时执行一次，并将函数的返回值作为状态的初始值。这个设计的目的是避免在每次渲染时都执行昂贵的计算操作。比如：

// 昂贵的计算只会在初始渲染时执行一次
const [data, setData] = useState(() => {
  return heavyComputation();
});

如果没有这个特性，每次组件渲染时heavyComputation()都会被调用，哪怕我们只需要它的初始值，这会造成不必要的性能损耗。

如何存储函数本身作为状态？ #

如果你确实需要把函数引用本身存在状态里，而不是让React执行它，只需要把目标函数包裹在一个返回它的箭头函数中：

const arbitraryFunction = () => { 
  console.log("I have been invoked!"); 
  return 100; 
};

const MyComponent = () => {
  // 正确存储函数引用
  const [fn, setFn] = useState(() => arbitraryFunction);
  console.log(typeof fn); // 输出"function"
  console.log(fn); // 输出函数本身
  return null;
};

这样React会执行外层的箭头函数（惰性初始化），而外层函数返回的就是我们要存储的目标函数引用，完美解决问题。

文档中的说明位置 #

这个特性在React官方文档的useState章节中有明确提到：当初始状态需要通过复杂计算得到时，可以传入一个函数，该函数会在初始渲染时被调用，返回值作为初始状态。

总结一下，这个设计是出于性能优化的考虑，虽然乍一看容易让人困惑，但它确实解决了实际开发中初始状态计算昂贵的场景问题。

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