Что лучше передавать в компонент — объект или примитивы?

Влияние типа пропсов на ререндеры

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

Пример с примитивами

const Child = React.memo(({ count }) => {
  console.log('Child render');
  return {count};
});

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
       setCount(c => c + 1)}>+
      
    
  );
}

Здесь Child перерендерится только при изменении count.

Проблема с объектами

const Child = React.memo(({ data }) => {
  console.log('Child render');
  return {data.value};
});

function Parent() {
  const [count, setCount] = useState(0);
  const data = { value: 'test' }; // новый объект каждый рендер
  return (
    <>
       setCount(c => c + 1)}>+
      
    
  );
}

Child будет перерендериваться при каждом клике, даже если data не изменился.

Как правильно передавать объекты

• Использовать useMemo для стабилизации ссылки:

  const data = useMemo(() => ({ value: 'test' }), []);

• Вынести объект за пределы компонента, если он статичен:

  const DATA = { value: 'test' };

• Разделить объект на отдельные примитивные пропсы, если это возможно.

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