use memo

• Справочник
  • "use memo"
  • Как "use memo" помечает функции для оптимизации
  • Когда использовать "use memo"
• Использование
  • Работа с различными режимами компиляции
• Устранение неполадок
  • Проверка оптимизации
  • См. также

Справочник

"use memo"

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

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

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

Предостережения

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

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

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

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

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

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

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

Рассмотрите возможность использования "use memo" в следующих случаях:

Вы используете режим аннотаций

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

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

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

Вы постепенно внедряете компилятор React

Начните с режима 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'
    }]
  ]
};

Режим аннотаций

// ✅ 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".

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

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

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

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

См. также

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