Skip to content

[compiler] Add note about gating evaluation #7891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 21, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions src/content/learn/react-compiler/incremental-adoption.md
Original file line number Diff line number Diff line change
Expand Up @@ -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*/}

Expand Down
4 changes: 3 additions & 1 deletion src/content/reference/react-compiler/gating.md
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
```

Expand Down Expand Up @@ -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*/}
Expand Down