PassFront
  1. PassFront
  2. База знаний
  3. Рендеринг и производительность

Когда не нужно использовать memo?

Рендеринг и производительность

React.memo не нужен чаще, чем кажется: он платный (сравнение props + память) и молча ломается. Есть чёткие случаи, когда его добавлять не стоит.

Когда memo бесполезен

  • Props почти всегда меняются: компонент получает новые данные при каждом рендере родителя — сравнение только добавляет работу.
  • Компонент дешёвый: пара элементов разметки; вызвать функцию быстрее, чем сравнить props.
  • Нестабильные props: родитель передаёт инлайн-объекты, стрелки, children — сравнение никогда не пройдёт. Мемоизация «на бумаге», а рендеры идут.
  • Компонент рендерится редко (страница, layout) — оптимизировать нечего.
  • Причина рендера не в props: собственный state, useContext, useSelector — memo от них не защищает.

Когда memo вреден

  • Усложняет код и требует useCallback/useMemo вокруг — цепочка хрупкая: один рефакторинг ломает её незаметно.
  • Кастомный компаратор с глубоким сравнением может стоить дороже самого рендера.
  • Ошибочный true из компаратора «замораживает» компонент со старыми данными — баг корректности.

Когда memo нужен

Дорогой или часто рендерящийся компонент со стабильными props: строки таблицы, карточки списка, тяжёлые виджеты, у которых родитель обновляется по не связанным с ними причинам.

Правильный подход

Профилировать (React DevTools) → сначала структурные правки (спуск состояния, children-как-проп) → затем точечно memo. React Compiler (React 19) снимает необходимость ручной мемоизации.

Коротко для собеседования

memo не нужен, когда props меняются почти всегда, компонент дёшев или рендерится редко, props нестабильны (инлайн-объекты, children) или рендер вызван state/контекстом/стором — во всех этих случаях он лишь добавляет расходы и хрупкость. Нужен для дорогих часто рендерящихся компонентов со стабильными props, по результатам профилирования.

Другие вопросы раздела