React中以函数作为useState初始值的正确方式探讨

Great question! Let's break down the differences between these two approaches clearly, and walk through when to use each one plus the best practices.

先明确React对useState参数的处理逻辑 #

Before diving into the two写法, let's get the core rule straight:

• If you pass a non-function value (like a number, string, or object) to useState, React uses it directly as the initial state. It only respects this value on the first render, but the value itself will still be evaluated on every re-render (which is why your third写法 is problematic).
• If you pass a function to useState, React treats it as an initializer function: it will only call this function once, on the first render, and use its return value as the initial state. Subsequent re-renders will ignore this function entirely.

写法1 vs 写法2：具体差异 #

Let's break down your two valid-looking approaches:

写法1: const [count, setCount] = useState(calculateInitialValue); #

The behavior here depends entirely on what calculateInitialValue is:

• If calculateInitialValue is a plain value (e.g., const calculateInitialValue = 10;), this works fine—your initial state will be 10, same as写法2.
• If calculateInitialValue is a function (e.g., const calculateInitialValue = () => { console.log("calculating"); return 10; }), this will not work as expected. You're passing the function itself to useState, so your count state will be the function object, not its return value. You'd have to call count() to get the number, which is almost never what you want.

写法2: const [count, setCount] = useState(() => calculateInitialValue()); #

This is the safe, reliable approach for computed initial values:

• You're passing an arrow function (the initializer) to useState. React runs this arrow function once on the first render, which in turn calls calculateInitialValue() and uses its return value as the initial state.
• No matter what calculateInitialValue is (a value or a function that returns a value), this写法 will correctly get you the initial state you need.
• Most importantly, calculateInitialValue() only runs once—no unnecessary re-runs on state changes, which fixes the performance issue of写法3.

什么时候用哪种写法？ #

1. Static, simple initial values: If your initial state is a plain value that doesn't need calculation (like 0, "", or {}), just pass it directly: useState(0). No need for a function here.
2. Computed initial values: If your initial state requires any kind of work (reading from localStorage, filtering an array, running a calculation, etc.), always use写法2's initializer function pattern.
   • Why not写法1? If your calculation is a function,写法1 will store the function itself as state. If you skip the wrapper function and do useState(calculateInitialValue()) (写法3), you force the calculation to run on every re-render, wasting performance.

最佳实践总结 #

• For static, simple values: Use direct value passing (e.g., useState(0)).
• For computed initial values: Always use the initializer function pattern (写法2: useState(() => yourCalculation())).
  • This ensures your calculation only runs once, avoiding performance overhead.
  • It also prevents accidental bugs where you store a function as state instead of its return value.

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