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

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

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

Пример с обычным значением

const [state, setState] = useState(expensiveFunction()); // вызывается на каждом рендере

Здесь expensiveFunction() будет вызываться при каждом рендере, даже если состояние уже инициализировано. Это может привести к ненужным вычислениям.

Пример с ленивой инициализацией

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

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

Когда это применять

• Когда начальное значение требует тяжёлых вычислений.
• Когда нужно прочитать данные из localStorage или sessionStorage.
• Когда начальное значение зависит от внешних данных, которые не меняются.

Вывод

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