From 8d95d1335e59a0ec9ef6c6c1285494c33ef9933f Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Wed, 3 Sep 2025 10:02:13 -0400 Subject: [PATCH 1/3] Fix handleClick compiler intro example --- src/content/learn/react-compiler/introduction.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index 96fdf70db89..11b392eddc0 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -43,7 +43,7 @@ const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) { return (
{processedData.map(item => ( - handleClick(item)} /> + ))}
); @@ -65,14 +65,14 @@ function ExpensiveComponent({ data, onClick }) { return (
{processedData.map(item => ( - handleClick(item)} /> + ))}
); } ``` -_[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)_ +_[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BSIDlj2zk4KiuT2omLib2ROAej6l-KUlBX7Ol566O9QjVMAoQCIQNpMGg8F4UCAQAogA)_ React Compiler automatically applies the equivalent optimizations, ensuring your app only re-renders when necessary. From d42d557cd61f4c728bd66f060339a5924b1f8edb Mon Sep 17 00:00:00 2001 From: Rick Hanlon Date: Wed, 3 Sep 2025 10:45:16 -0400 Subject: [PATCH 2/3] Use a note instead --- .../learn/react-compiler/introduction.md | 23 +++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index 11b392eddc0..083f510238a 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -43,13 +43,28 @@ const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) { return (
{processedData.map(item => ( - + handleClick(item)} /> ))}
); }); ``` + + + +This manual memoization has a subtle bug that breaks memoization: + +```js [[2, 1, "() => handleClick(item)"]] + handleClick(item)} /> +``` + +Even though `handleClick` is wrapped in `useCallback`, the arrow function `() => handleClick(item)` creates a new function every time the component renders. This means that `Item` will always receive a new `onClick` prop, breaking memoization. + +The React Compiler is able to optimize this correctly with or without the arrow function, ensuring that `Item` only re-renders when `props.onClick` changes. + + + ### After React Compiler {/*after-react-compiler*/} With React Compiler, you write the same code without manual memoization: @@ -65,16 +80,16 @@ function ExpensiveComponent({ data, onClick }) { return (
{processedData.map(item => ( - + handleClick(item)} /> ))}
); } ``` -_[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BSIDlj2zk4KiuT2omLib2ROAej6l-KUlBX7Ol566O9QjVMAoQCIQNpMGg8F4UCAQAogA)_ +_[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)_ -React Compiler automatically applies the equivalent optimizations, ensuring your app only re-renders when necessary. +React Compiler automatically applies the optimal memoization, ensuring your app only re-renders when necessary. #### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/} From 0188f8a80522199ac21c8c365763f81446e3d320 Mon Sep 17 00:00:00 2001 From: Ricky Date: Wed, 3 Sep 2025 13:33:30 -0400 Subject: [PATCH 3/3] Update src/content/learn/react-compiler/introduction.md --- src/content/learn/react-compiler/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index 083f510238a..9957b8227e1 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -61,7 +61,7 @@ This manual memoization has a subtle bug that breaks memoization: Even though `handleClick` is wrapped in `useCallback`, the arrow function `() => handleClick(item)` creates a new function every time the component renders. This means that `Item` will always receive a new `onClick` prop, breaking memoization. -The React Compiler is able to optimize this correctly with or without the arrow function, ensuring that `Item` only re-renders when `props.onClick` changes. +React Compiler is able to optimize this correctly with or without the arrow function, ensuring that `Item` only re-renders when `props.onClick` changes.