What is lazy initialization of hooks and how to use it?

Question

Accepted Answer

**Lazy initialization** is passing a **function instead of a value** to useState/useReducer, which executes ONLY on the first render.

**Why it matters:** Without lazy initialization, expensive computations run on every single render, even though the result is only needed once. This is a common performance pitfall in React applications. For example, parsing a large JSON string from localStorage, generating a complex data structure, or running a cryptographic operation — all of these waste CPU cycles if executed on every render.

**Problem:** Without lazy initialization, the initial value calculation executes on EVERY render:
```jsx
// BAD: expensiveCalculation() is called on every render
const [data, setData] = useState(expensiveCalculation());
```

**How it works step-by-step:**
1. React encounters `useState(() => value)` during the first render.
2. It calls the function once and stores the result as the initial state.
3. On subsequent renders, React ignores the function entirely and keeps the stored state.
4. The function is only called again if the component unmounts and remounts.

**Solution — pass a function:**
```jsx
// GOOD: expensiveCalculation() is called ONCE
const [data, setData] = useState(() => expensiveCalculation());

// Example: initial value from localStorage
const [theme, setTheme] = useState(() => {
  const saved = localStorage.getItem("theme");
  return saved || "light";  // JSON.parse only on mount
});

// Example: complex calculation
const [matrix, setMatrix] = useState(() => generateMatrix(100));
```

**Lazy initialization with useReducer:**
```jsx
function reducer(state, action) { /* ... */ }

const [state, dispatch] = useReducer(reducer, null, () => {
  return loadInitialState();  // Executes once
});
```

**Real-world example — loading user preferences:**
```jsx
function App() {
  const [preferences, setPreferences] = useState(() => {
    try {
      const raw = localStorage.getItem("userPrefs");
      return raw ? JSON.parse(raw) : getDefaultPreferences();
    } catch {
      return getDefaultPreferences();
    }
  });

return <SettingsPanel prefs={preferences} />;
}
```

**Performance considerations:**
- Lazy initialization adds zero overhead — the function call is O(1) extra work on mount only.
- Without it, a heavy computation (e.g., parsing a 5MB JSON file) runs on every render, causing noticeable lag.
- The benefit is proportional to how expensive the initialization is.

**Common mistakes:**
- Passing the result of a function call instead of the function itself: `useState(getValue())` vs `useState(() => getValue())`.
- Assuming the function runs again on re-render — it does NOT.
- Using lazy init when the value genuinely changes per render (e.g., `Date.now()`) — this would freeze the stale value.

**Rule:** Always pass a function if the initial value is expensive to compute or read from an external source (localStorage, API, file).

React: What is lazy initialization of hooks and how to use it?