Что нужно сделать, чтобы дефолтное значение-массив не создавалось заново при каждом рендере компонента?

Проблема создания массива при каждом рендере

Когда вы пишете useState([]), JavaScript создаёт новый пустой массив при каждом вызове компонента. React использует это значение только при первом рендере, но сам факт создания массива происходит каждый раз. Для пустого массива это незначительно, но если массив заполняется сложными данными или вычисляется через функцию, это может замедлить приложение.

Решение: ленивая инициализация

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

// Плохо: массив создаётся каждый рендер
const [items, setItems] = useState(createInitialArray());

// Хорошо: функция вызывается только один раз
const [items, setItems] = useState(() => createInitialArray());

// Для пустого массива тоже лучше использовать функцию
const [list, setList] = useState(() => []);

Когда это важно

• Если начальное значение требует сложных вычислений или обращения к внешним данным.
• Если массив большой и его создание занимает время.
• Если вы используете мемоизацию и хотите избежать лишних аллокаций.

Вывод

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