API 参考
指令

不使用 memo

"use no memo" 可防止函数被 React Compiler 优化。

¥"use no memo" prevents a function from being optimized by React Compiler.

参考

¥Reference

"use no memo"

在函数开头添加 "use no memo"，以防止 React Compiler 优化。

¥Add "use no memo" at the beginning of a function to prevent React Compiler optimization.

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

当函数包含 "use no memo" 时，React 编译器将在优化过程中完全跳过它。在调试或处理编译器无法正常工作的代码时，这可用作临时应急方案。

¥When a function contains "use no memo", the React Compiler will skip it entirely during optimization. This is useful as a temporary escape hatch when debugging or when dealing with code that doesn’t work correctly with the compiler.

注意事项

¥Caveats

  • "use no memo" 必须位于函数体的最开头，在任何导入或其他代码之前（注释可以）。

    ¥"use no memo" must be at the very beginning of a function body, before any imports or other code (comments are OK).

  • 该指令必须使用双引号或单引号，而不是反引号。

    ¥The directive must be written with double or single quotes, not backticks.

  • 该指令必须与 "use no memo" 或其别名 "use no forget" 完全匹配。

    ¥The directive must exactly match "use no memo" or its alias "use no forget".

  • 此指令优先于所有编译模式和其他指令。

    ¥This directive takes precedence over all compilation modes and other directives.

  • 它旨在用作临时调试工具，而非永久解决方案。

    ¥It’s intended as a temporary debugging tool, not a permanent solution.

"use no memo" 如何选择退出优化

¥How "use no memo" opts-out of optimization

React Compiler 会在构建时分析你的代码并应用优化。"use no memo" 创建了一个明确的边界，告诉编译器完全跳过某个函数。

¥React Compiler analyzes your code at build time to apply optimizations. "use no memo" creates an explicit boundary that tells the compiler to skip a function entirely.

此指令优先于所有其他设置：

¥This directive takes precedence over all other settings:

  • 在 all 模式下：尽管全局设置已设置，该函数仍会被跳过

    ¥In all mode: The function is skipped despite the global setting

  • 在 infer 模式下：即使启发式算法可以优化该函数，该函数也会被跳过

    ¥In infer mode: The function is skipped even if heuristics would optimize it

编译器会将这些函数视为未启用 React 编译器，使其保持原样。

¥The compiler treats these functions as if the React Compiler wasn’t enabled, leaving them exactly as written.

何时使用 "use no memo"

¥When to use "use no memo"

"use no memo" 应谨慎且临时使用。常见情况包括：

¥"use no memo" should be used sparingly and temporarily. Common scenarios include:

调试编译器问题

¥Debugging compiler issues

当你怀疑编译器导致问题时，请暂时禁用优化以隔离问题：

¥When you suspect the compiler is causing issues, temporarily disable optimization to isolate the problem:

function ProblematicComponent({ data }) {
  "use no memo"; // TODO: Remove after fixing issue #123

  // Rules of React violations that weren't statically detected
  // ...
}

第三方库集成

¥Third-party library integration

当与可能与编译器不兼容的库集成时：

¥When integrating with libraries that might not be compatible with the compiler:

function ThirdPartyWrapper() {
  "use no memo";

  useThirdPartyHook(); // Has side effects that compiler might optimize incorrectly
  // ...
}

用法

¥Usage

"use no memo" 指令位于函数体的开头，以防止 React 编译器优化该函数：

¥The "use no memo" directive is placed at the beginning of a function body to prevent React Compiler from optimizing that function:

function MyComponent() {
  "use no memo";
  // Function body
}

该指令也可以放在文件顶部，以影响该模块中的所有函数：

¥The directive can also be placed at the top of a file to affect all functions in that module:

"use no memo";

// All functions in this file will be skipped by the compiler

函数级别的 "use no memo" 会覆盖模块级别的指令。

¥"use no memo" at the function level overrides the module level directive.

故障排除

¥Troubleshooting

指令未阻止编译

¥Directive not preventing compilation

如果 "use no memo" 无法正常工作：

¥If "use no memo" isn’t working:

// ❌ Wrong - directive after code
function Component() {
  const data = getData();
  "use no memo"; // Too late!
}

// ✅ Correct - directive first
function Component() {
  "use no memo";
  const data = getData();
}

另请检查：

¥Also check:

  • 拼写 - 必须恰好是 "use no memo"

    ¥Spelling - must be exactly "use no memo"

  • 引用 - 必须使用单引号或双引号，而不是反引号

    ¥Quotes - must use single or double quotes, not backticks

最佳实践

¥Best practices

请务必记录禁用优化的原因：

¥Always document why you’re disabling optimization:

// ✅ Good - clear explanation and tracking
function DataProcessor() {
  "use no memo"; // TODO: Remove after fixing rule of react violation
  // ...
}

// ❌ Bad - no explanation
function Mystery() {
  "use no memo";
  // ...
}

另请参阅

¥See also

上一章"use memo"
下一章编译库