From ab0b9c21e8744f5d45c971e00ad3ebd6d5546029 Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Mon, 21 Jul 2025 18:01:51 -0400 Subject: [PATCH 1/2] [compiler] Flesh out incremental adoption intro more Previously the intro was pretty barebones. Fleshed it out a bit more to describe why it might be useful to reach for in a large codebase. --- .../learn/react-compiler/incremental-adoption.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/content/learn/react-compiler/incremental-adoption.md b/src/content/learn/react-compiler/incremental-adoption.md index 3d616822afa..56d9320346f 100644 --- a/src/content/learn/react-compiler/incremental-adoption.md +++ b/src/content/learn/react-compiler/incremental-adoption.md @@ -19,12 +19,13 @@ React Compiler can be adopted incrementally, allowing you to try it on specific ## Why Incremental Adoption? {/*why-incremental-adoption*/} -While React Compiler is designed to handle most React code automatically, adopting it incrementally allows you to: +React Compiler is designed to optimize your entire codebase automatically, but you don't have to adopt it all at once. Incremental adoption gives you control over the rollout process, letting you test the compiler on small parts of your app before expanding to the rest. -- Test the compiler on a small portion of your app first -- Identify and fix any Rules of React violations -- Build confidence before expanding to your entire codebase -- Minimize risk in production applications +Starting small helps you build confidence in the compiler's optimizations. You can verify that your app behaves correctly with compiled code, measure performance improvements, and identify any edge cases specific to your codebase. This approach is especially valuable for production applications where stability is critical. + +Incremental adoption also makes it easier to address any Rules of React violations the compiler might find. Instead of fixing violations across your entire codebase at once, you can tackle them systematically as you expand compiler coverage. This keeps the migration manageable and reduces the risk of introducing bugs. + +By controlling which parts of your code get compiled, you can also run A/B tests to measure the real-world impact of the compiler's optimizations. This data helps you make informed decisions about full adoption and demonstrates the value to your team. ## Approaches to Incremental Adoption {/*approaches-to-incremental-adoption*/} From 4047f4fe266c87c9db07706bbda9a2541f6b98f6 Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Mon, 21 Jul 2025 18:08:55 -0400 Subject: [PATCH 2/2] [compiler] Add note about gating evaluation Clarify when the gating function is evaluated. --- src/content/reference/react-compiler/gating.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/reference/react-compiler/gating.md b/src/content/reference/react-compiler/gating.md index 2959c49fa29..479506af32b 100644 --- a/src/content/reference/react-compiler/gating.md +++ b/src/content/reference/react-compiler/gating.md @@ -63,7 +63,7 @@ Configures runtime feature flag gating for compiled functions. // src/utils/feature-flags.js export function shouldUseCompiler() { // your logic here - return Math.random() < 0.5; + return getFeatureFlag('react-compiler-enabled'); } ``` @@ -94,6 +94,8 @@ const Button = shouldUseCompiler() : function Button_original(props) { /* original version */ }; ``` +Note that the gating function is evaluated once at module time, so once the JS bundle has been parsed and evaluated the choice of component stays static for the rest of the browser session. + --- ## Troubleshooting {/*troubleshooting*/}