> Есть ли проблемы при инициализации useState функцией в React и как их решить (React)

Короткий ответ

Да, есть. Главная проблема - при передаче в useState функции напрямую (не lazy initializer) она будет вызываться при каждом рендере, хотя результат не используется. Это снижает производительность, если функция тяжелая. Решение - передавать lazy initializer: useState(() => computeExpensiveValue()). Вторая проблема - если функция мутирует внешнее состояние или зависит от пропсов, это может привести к багам.

Подробное объяснение

React поддерживает два способа инициализации состояния в useState:

1. Прямое значение: useState(initialValue) - вычисляется один раз при первом рендере.
2. Lazy initializer: useState(() => initialValue) - функция вызывается только при первом рендере.

Проблема возникает, когда разработчик передает вызов функции как значение: useState(computeExpensiveValue()). В этом случае computeExpensiveValue выполняется при каждом рендере, хотя результат отбрасывается после первого. Это особенно критично для тяжелых вычислений, чтения из localStorage или парсинга данных.

Дополнительная проблема - если lazy initializer использует пропсы или внешние переменные, которые могут измениться между рендерами. React вызывает lazy initializer только один раз, поэтому такие зависимости не будут обновлены. Это может привести к неконсистентному состоянию.

На практике

Для тяжелых вычислений всегда используй lazy initializer:

JSX
const [data, setData] = useState(() => {
  const stored = localStorage.getItem('key');
  return stored ? JSON.parse(stored) : defaultValue;
});

Если инициализация зависит от пропсов, лучше использовать useEffect или useMemo:

JSX
const [state, setState] = useState(() => computeInitial(props));
// Если props меняются - используй useEffect для синхронизации

Для простых значений (числа, строки, булевы) lazy initializer избыточен - передавай значение напрямую.

Пример кода

JSX
// Проблема: функция вызывается каждый рендер
const [value, setValue] = useState(computeExpensiveValue()); // ❌

// Решение: lazy initializer
const [value, setValue] = useState(() => computeExpensiveValue()); // ✅

// Пример с зависимостью от пропсов (потенциальная проблема)
const [items, setItems] = useState(() => props.initialItems); // ❌ не обновится при изменении props

// Правильный подход для зависимостей от пропсов
const [items, setItems] = useState(props.initialItems);
useEffect(() => {
  setItems(props.initialItems);
}, [props.initialItems]);

Как отвечать на собеседовании

Начни с ключевой проблемы: вызов функции при каждом рендере. Объясни разницу между значением и lazy initializer. Приведи пример с localStorage или тяжелыми вычислениями. Упомяни, что для простых значений lazy initializer не нужен. Добавь про зависимость от пропсов - это показывает глубокое понимание. Закончи рекомендацией: использовать lazy initializer только для действительно тяжелых операций.

Что проверяет интервьюер

• Понимание механизма рендеринга React
• Знание оптимизаций производительности
• Умение различать случаи, когда lazy initializer полезен, а когда избыточен
• Понимание lifecycle состояния в React
• Способность предвидеть баги, связанные с зависимостями

Типичные ошибки

• Путаница между useState(compute()) и useState(() => compute())
• Использование lazy initializer для простых значений (избыточно)
• Передача в lazy initializer пропсов без учета их изменений
• Ожидание, что lazy initializer будет вызываться при каждом обновлении пропсов
• Игнорирование side effects внутри lazy initializer (например, запись в localStorage)