React.memo
Тема дорожной карты · React
React.memo — это компонент высшего порядка, который мемоизирует результат рендеринга функционального компонента, предотвращая ненужные перерендеры, когда родительский компонент перерендеривается, но пропсы компонента не изменились. По умолчанию React выполняет поверхностное сравнение предыдущих и следующих пропсов; в качестве второго аргумента React.memo можно передать пользовательскую функцию сравнения для более тонкого управления обновлениями компонента. Использование React.memo совместно с хуками useCallback и useMemo — стандартный паттерн оптимизации производительности в React, поскольку передача новой ссылки на функцию или объект в мемоизированный компонент при каждом рендере сводит на нет смысл мемоизации. React.memo особенно ценен для больших списков, ресурсоёмких рендеров или чистых презентационных компонентов, получающих стабильные пропсы от родителя, управляющего сложным состоянием. В TypeScript-проектах React.memo полностью сохраняет вывод типов для пропсов обёрнутого компонента, являясь нулевой накладной расходов добавкой к набору инструментов производительности React.
Как это работает
React.memo — это в основном избегание ненужных ререндеров. React.memo(Component) пропускает ререндер, если props равны по ссылке; парная связка с useMemo/useCallback стабилизирует props. lazy(() => import("./X")) + <Suspense fallback={...}> откладывает загрузку chunk до момента нужды (route-based code splitting). React Profiler (в DevTools) показывает, какой компонент сколько занял и почему ререндерился — читайте перед тюнингом вслепую.
Когда применять
Сначала профайл, потом оптимизация. Lazy-load по route-границе для любого бандла >~200 KB gzipped. Мемоизируйте детей дорогих списков через React.memo + стабильные коллбэки. Windowing (react-window, react-virtualized) — для списков 1000+ элементов. Пропустите useMemo/useCallback для тривиальных значений — оверхед учёта дороже сэкономленного compute в 90% случаев.
Типичные ошибки
Ловушки React.memo: обёртка каждого компонента в React.memo "для производительности" (стоимость сравнений суммируется — мемоизируйте только листья часто ререндерящихся деревьев); мемоизация значений с дешёвым compute (оверхед больше выгоды); большой бандл без code splitting (медленный TTI); оптимизация без замеров (чините не то). Источник истины — вкладка Profiler в React DevTools.