use memo¶

"use memo" помечает функцию для оптимизации React Compiler.

Примечание

В большинстве случаев "use memo" не нужна. Она нужна прежде всего в режиме annotation, где функции для оптимизации нужно помечать явно. В режиме infer компилятор автоматически определяет компоненты и хуки по шаблону имени (PascalCase для компонентов, префикс use для хуков). Если компонент или хук не компилируется в режиме infer, исправьте соглашение об именовании, а не принуждайте компиляцию с помощью "use memo".

Описание¶

`"use memo"`¶

Добавьте "use memo" в начало функции, чтобы пометить её для оптимизации React Compiler.

function MyComponent() {
  "use memo";
  // ...
}

Если функция содержит "use memo", React Compiler проанализирует и оптимизирует её во время сборки. Компилятор автоматически мемоизирует значения и компоненты, чтобы избежать ненужных повторных вычислений и повторных рендеров.

Предупреждения¶

"use memo" должна стоять в самом начале тела функции, до любых импортов и другого кода (комментарии допустимы).
Директиву нужно записывать в двойных или одинарных кавычках, а не в обратных.
Директива должна точно совпадать с "use memo".
Обрабатывается только первая директива в функции; остальные игнорируются.
Эффект директивы зависит от параметра compilationMode.

Как `"use memo"` помечает функции для оптимизации¶

В приложении React, которое использует React Compiler, функции анализируются во время сборки, чтобы определить, можно ли их оптимизировать. По умолчанию компилятор автоматически выводит, какие компоненты мемоизировать, но это может зависеть от параметра compilationMode, если вы его задали.

"use memo" явно помечает функцию для оптимизации и переопределяет поведение по умолчанию:

В режиме annotation: оптимизируются только функции с "use memo"
В режиме infer: компилятор использует эвристики, но "use memo" принудительно включает оптимизацию
В режиме all: по умолчанию оптимизируется всё, поэтому "use memo" избыточна

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

Когда использовать `"use memo"`¶

"use memo" стоит рассмотреть в таких случаях:

Вы используете режим annotation¶

В compilationMode: 'annotation' директива обязательна для любой функции, которую вы хотите оптимизировать:

// ✅ This component will be optimized
function OptimizedList() {
  "use memo";
  // ...
}

// ❌ This component won't be optimized
function SimpleWrapper() {
  // ...
}

Вы постепенно внедряете React Compiler¶

Начните с режима annotation и выборочно оптимизируйте стабильные компоненты:

// Start by optimizing leaf components
function Button({ onClick, children }) {
  "use memo";
  // ...
}

// Gradually move up the tree as you verify behavior
function ButtonGroup({ buttons }) {
  "use memo";
  // ...
}

Использование¶

Работа с разными режимами компиляции¶

Поведение "use memo" зависит от конфигурации компилятора:

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'annotation' // or 'infer' or 'all'
    }]
  ]
};

Режим annotation¶

// ✅ Optimized with "use memo"
function ProductCard({ product }) {
  "use memo";
  // ...
}

// ❌ Not optimized (no directive)
function ProductList({ products }) {
  // ...
}

Режим infer (по умолчанию)¶

// Automatically memoized because this is named like a Component
function ComplexDashboard({ data }) {
  // ...
}

// Skipped: Is not named like a Component
function simpleDisplay({ text }) {
  // ...
}

В режиме infer компилятор автоматически определяет компоненты и хуки по шаблону имени (PascalCase для компонентов, префикс use для хуков). Если компонент или хук не компилируется в режиме infer, исправьте соглашение об именовании, а не принуждайте компиляцию с помощью "use memo".

Устранение неполадок¶

Проверка оптимизации¶

Чтобы убедиться, что компонент оптимизируется:

Проверьте скомпилированный результат в сборке
В React DevTools найдите значок Memo ✨

См. также¶

"use no memo" - исключение из компиляции
compilationMode - настройка поведения компиляции
React Compiler - руководство по началу работы

Источник — https://react.dev/reference/react-compiler/directives/use-memo