[Compiler] Don't throw calculate in render when there is a ref in the effect

[everettbu]

Mirror of facebook/react#34577
Original author: jorge-cab

---

Summary:
Using refs in an effect signify we are synchronizing with external state so to avoid overcapturing we just bail when we encounter one

---

Stack created with Sapling. Best reviewed with ReviewStack.

• #34580
• #34579
• #34578
• -> #34577
• #34575
• #34574

[greptile-apps]

Greptile Overview

Greptile Summary

This PR enhances the React compiler's derived computation validation by adding an experimental validator that bails out when refs are detected in effects. The key change is recognizing that refs signal synchronization with external state, which is a legitimate use case for effects and should not trigger "calculate in render" errors.

Core changes:

• Added ValidateNoDerivedComputationsInEffects_exp.ts with ref detection logic (ValidateNoDerivedComputationsInEffects_exp.ts:362-365)
• Early return from validation when useRef is detected in effect body to avoid false positives
• New config flag validateNoDerivedComputationsInEffects_exp to enable experimental behavior
• Comprehensive test coverage including ref+state, conditional refs, and prop function calls

Validation improvements:

• Avoids false positives for legitimate external state synchronization patterns
• Also bails out when effect calls prop functions (can't determine if side-effectful)
• Maintains existing error detection for actual anti-patterns (deriving from props/state only)

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are well-isolated as an experimental feature behind a config flag, have comprehensive test coverage (30+ test files), and improve validation accuracy by eliminating false positives. The core logic is sound: detecting refs to identify external state synchronization patterns.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects_exp.ts	5/5	New experimental validator that bails out when refs are detected in effects (lines 362-365), preventing false positives for external state synchronization
compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts	5/5	Added import and invocation of experimental validation function with feature flag check
compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts	5/5	Added config flag validateNoDerivedComputationsInEffects_exp to enable experimental validation
compiler/packages/babel-plugin-react-compiler/src/tests/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js	5/5	Test case verifying no error when effect derives state from both ref and props (external state sync pattern)
compiler/packages/babel-plugin-react-compiler/src/tests/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js	5/5	Test case verifying no error when effect conditionally derives state based on ref value

[greptile-apps]

_{35 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[everettbu]

Upstream PR was closed or merged. Code is synced via branch mirror.