Почему значения props типа массив или объект рекомендуется задавать по умолчанию через функцию, а не готовым значением?

В React значения по умолчанию для props можно задавать двумя способами: напрямую (defaultProps или дефолт в деструктуризации) или через функцию-фабрику. Разница критична для объектов и массивов, потому что в JavaScript они передаются по ссылке.

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

Если написать items = [] в деструктуризации, то этот массив создаётся один раз при определении функции компонента. Все экземпляры, у которых prop не передан, получат ссылку на один и тот же массив. Любая мутация (например, items.push(...)) изменит его для всех.

function List({ items = [] }) {
  // items — один и тот же массив для всех List без prop
  items.push('new'); // мутация общего массива
  return <ul>{items.map(i => <li>{i}</li>)}</ul>;
}

Решение через функцию

Функция-фабрика вызывается при каждом рендере, создавая новый объект или массив. Это гарантирует изоляцию данных между экземплярами.

function List({ items = [] }) {
  // всё ещё общий массив, если дефолт в деструктуризации
}

// Правильно: фабрика в defaultProps
List.defaultProps = {
  items: () => []
};

// Или через хук useMemo/useState для локального состояния
function List({ items }) {
  const safeItems = items ?? [];
  return <ul>{safeItems.map(i => <li>{i}</li>)}</ul>;
}

Где это применяется

• Компоненты-списки, таблицы, формы с массивами значений.
• Компоненты с объектами конфигурации, настройками, фильтрами.
• Любые места, где prop может мутироваться внутри компонента.

Важно: в современном React (функциональные компоненты) defaultProps для функций устарел, и дефолт задают через деструктуризацию. Но даже там items = [] создаёт новый массив на каждый вызов функции, что безопасно. Проблема возникает только если значение вынесено в константу вне компонента.

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