You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[React Compiler](/learn/react-compiler)automatically applies the equivalent of `memo` to all components, reducing the need for manual memoization. You can use the compiler to handle component memoization automatically.
When you enable [React Compiler](/learn/react-compiler), you typically don't need `React.memo` anymore. The compiler automatically optimizes component re-rendering for you.
Notice the highlighted lines: The compiler wraps `<ExpensiveChild name="John" />` in a cache check. Since the `name` prop is always `"John"`, this JSX is created once and reused on every parent re-render. This is exactly what `React.memo` does - it prevents the child from re-rendering when its props haven't changed.
431
-
432
-
The React Compiler automatically:
433
-
1. Tracks that the `name` prop passed to `ExpensiveChild` hasn't changed
434
-
2. Reuses the previously created JSX for `<ExpensiveChild name="John" />`
435
-
3. Skips re-rendering `ExpensiveChild` entirely
436
-
437
-
This means **you can safely remove `React.memo` from your components when using React Compiler**. The compiler provides the same optimization automatically, making your code cleaner and easier to maintain.
432
+
React Compiler 会自动:
433
+
1. 追踪传给 `ExpensiveChild` 的 `name` 有无变化
434
+
2. 为 `<ExpensiveChild name="John" />` 重用先前创建的 JSX
435
+
3. 完全跳过 `ExpensiveChild` 的重新渲染
438
436
437
+
This means **在使用 React Compiler 时,你可以放心移除 `React.memo`**. 编译器会自动提供相同的优化,让代码更简洁更易维护。
439
438
<Note>
440
439
441
-
The compiler's optimization is actually more comprehensive than `React.memo`. It also memoizes intermediate values and expensive computations within your components, similar to combining `React.memo`with`useMemo` throughout your component tree.
0 commit comments