initialValue for useState

#1. Basic difference

---

#2. Example: without a function

Here expensiveCalculation() runs on every render, even if the state never changed at all.

This can be inefficient if:

• the component re-renders often,
• the computation is heavy (e.g. filtering a large array, a localStorage lookup, etc.).

---

#3. Example: with a function (lazy initialization)

Now React:

• stores the function, but calls it only once, on the first render (mount),
• on subsequent renders it will not recompute expensiveCalculation().

So () => expensiveCalculation() is "lazy" state initialization.

---

#4. What is the practical benefit

#When to use useState(() => ...):

• When computing the starting value is expensive:

  javascript

  Copy

  const [filtered, setFiltered] = useState(() => data.filter(x => x.active));

• When initialization uses external resources (e.g. localStorage):

  javascript

  Copy

  const [theme, setTheme] = useState(() => { return localStorage.getItem("theme") || "light"; });

• When you need to run code once, not on every render.

---

#When it's fine to skip the function

If initialValue is a simple value (a number, string, boolean):

Then there's no point wrapping it in a function - it gives no benefit.

---

#Under the hood

When useState(arg) is called, React does the following:

• If arg is a value, it stores it directly;
• If arg is a function, it calls it (arg()) and stores the result.

That is:

But the second option runs the function only once, on mount.

---

#Summary