Зачем в useState можно передать функцию вместо значения? В чём отличие и когда это нужно?

Что такое ленивая инициализация в useState?

В React хук useState может принимать не только значение, но и функцию. Когда передаётся функция, React вызывает её только один раз — при первом рендере компонента. Это называется ленивой инициализацией (lazy initialization). Результат вызова функции становится начальным состоянием.

Когда это нужно?

Ленивая инициализация полезна, когда начальное состояние требует дорогостоящих операций: чтение из localStorage, сложные математические вычисления, парсинг больших данных. Без неё эти операции выполнялись бы при каждом рендере, даже если состояние уже инициализировано.

Пример кода

// Плохо: вычисление при каждом рендере
const [state, setState] = useState(expensiveComputation());

// Хорошо: вычисление только один раз
const [state, setState] = useState(() => expensiveComputation());

// Пример с localStorage
const [theme, setTheme] = useState(() => {
  const saved = localStorage.getItem('theme');
  return saved ? saved : 'light';
});

Отличие от передачи значения

Если передать значение, оно будет вычислено при каждом рендере (если это выражение). Функция же вызывается только один раз. Это особенно важно для тяжелых операций или когда начальное значение зависит от пропсов, которые могут меняться.

Вывод

Используйте ленивую инициализацию в useState, когда начальное состояние требует дорогих вычислений или асинхронных операций. Это улучшает производительность и делает код более предсказуемым.