Чем плох пустой массив как начальное состояние?

Проблема пустого массива как начального состояния

В React при использовании хука useState начальное значение передается один раз при первом рендере. Если передать пустой массив [], то каждый раз при вызове функции-инициализатора (например, при ленивой инициализации) будет создаваться новый объект массива. Это нарушает принцип ссылочной идентичности: React сравнивает состояния по ссылке, и новый массив всегда считается изменением.

Пример проблемы

const [items, setItems] = useState([]); // Новый массив при каждом рендере

useEffect(() => {
  // Этот эффект будет выполняться при каждом рендере,
  // потому что items каждый раз новая ссылка
  fetchData();
}, [items]); // Зависимость items меняется всегда

В результате эффект срабатывает бесконечно, вызывая лишние запросы или обновления. Это особенно критично в компонентах с частыми ререндерами.

Правильное решение

Используйте null или undefined как начальное состояние, а массив создавайте только при необходимости:

const [items, setItems] = useState(null);

useEffect(() => {
  if (items === null) {
    fetchData().then(data => setItems(data));
  }
}, [items]);

Или используйте ленивую инициализацию с функцией, которая возвращает массив один раз:

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

Вывод

Пустой массив как начальное состояние в React — это антипаттерн, который может привести к неожиданным побочным эффектам и снижению производительности. Всегда используйте нейтральные значения (null, undefined) или ленивую инициализацию для избежания проблем с ререндерами.