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.
Here's the key part of what the React Compiler generates:
411
+
下面是 React Compiler 生成代码的关键部分:
412
412
413
413
```js {6-12}
414
414
functionParent() {
415
415
const$=_c(7);
416
416
const [seconds, setSeconds] =useState(0);
417
-
// ... other code ...
417
+
// ... 其他代码 ...
418
418
419
419
let t3;
420
420
if ($[4] ===Symbol.for("react.memo_cache_sentinel")) {
@@ -423,22 +423,22 @@ function Parent() {
423
423
} else {
424
424
t3 = $[4];
425
425
}
426
-
// ... return statement ...
426
+
// ... 返回语句 ...
427
427
}
428
428
```
429
429
430
-
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.
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
432
+
React Compiler 会自动:
433
+
1.追踪传给 `ExpensiveChild` 的 `name` 有无变化
434
+
2.为 `<ExpensiveChild name="John" />` 重用先前创建的 JSX
435
+
3.完全跳过 `ExpensiveChild`的重新渲染
436
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.
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