> Чем наполнить массив, создаваемый один раз и используемый в React компоненте (React)

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

Массив, создаваемый один раз и используемый в React компоненте, следует наполнять статическими данными или результатом вызова функции, которая не зависит от пропсов, состояния или эффектов. Лучший способ - вынести инициализацию за пределы компонента или обернуть в useMemo с пустыми зависимостями, чтобы избежать пересоздания массива при каждом рендере. Если массив зависит от внешних данных, используйте useState или useRef.

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

В React компоненты могут перерендериваться многократно. Если массив создаётся внутри тела компонента без мемоизации, он будет создаваться заново при каждом рендере, что может привести к лишним вычислениям и проблемам с зависимостями в хуках (например, в useEffect). Для массива, который создаётся один раз, есть несколько стратегий:

• Вынос за пределы компонента: если массив статичен (константы, конфигурация), его можно определить вне компонента - он создастся один раз при загрузке модуля.
• useMemo с пустыми зависимостями: если массив требует вычислений (например, генерация на основе внешних данных, доступных только внутри компонента), используйте useMemo(() => [...], []).
• useRef: если массив не влияет на рендер и нужен только для хранения данных, useRef позволяет сохранить ссылку без пересоздания.
• useState с lazy initializer: если массив должен быть частью состояния, передайте функцию-инициализатор в useState(() => createArray()).

Выбор зависит от того, нужен ли массив для рендера, изменяется ли он позже и зависит ли от внешних данных.

На практике

Для статических массивов (например, список опций для select) всегда выносите их за пределы компонента. Если массив генерируется динамически, но не зависит от пропсов или состояния, используйте useMemo с []. Если массив может изменяться в процессе работы компонента (например, через добавление элементов), используйте useState с lazy initializer. Для массивов, которые не участвуют в рендере (например, для хранения ссылок на DOM-элементы), подойдёт useRef.

Пример кода

JSX
// Статический массив - вынос за пределы компонента
const OPTIONS = ['apple', 'banana', 'cherry'];

// Динамический, но стабильный массив - useMemo
function MyComponent({ items }) {
  const stableArray = useMemo(() => {
    return items.filter(item => item.active).map(item => item.name);
  }, []); // пустой массив - создаётся один раз

  // Массив как часть состояния с lazy initializer
  const [list, setList] = useState(() => {
    return Array.from({ length: 100 }, (_, i) => i);
  });

  return <div>{stableArray.join(', ')}</div>;
}

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

Начните с ключевого принципа: массив не должен пересоздаваться при каждом рендере. Затем перечислите варианты: вынос за компонент, useMemo, useRef, useState с lazy initializer. Объясните trade-off каждого подхода. Приведите пример, когда массив используется в useEffect - без мемоизации он вызовет бесконечный цикл. Упомяните, что для массивов-зависимостей в хуках критична стабильность ссылки.

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

• Понимание жизненного цикла React компонента и механизма рендера.
• Знание хуков useMemo, useRef, useState и их правильного применения.
• Умение различать статические и динамические данные.
• Понимание проблем с зависимостями в useEffect и useCallback.
• Способность выбирать оптимальный подход под конкретную задачу.

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

• Создание массива внутри компонента без мемоизации, что приводит к лишним рендерам дочерних компонентов (если массив передаётся как проп).
• Использование useMemo с нестабильными зависимостями (например, с объектами или массивами, создаваемыми на лету), что сводит на нет мемоизацию.
• Помещение в useRef данных, которые должны вызывать ререндер - useRef не триггерит обновление UI.
• Забывание про lazy initializer в useState для тяжёлых вычислений - функция выполняется при каждом рендере, если передать её результат напрямую.