[Compiler] Fix ref validation false positives for props property access (#34775) #34910
+52
−8
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR fixes false positives in the React Compiler's ref validation rule where property accesses from props objects were incorrectly flagged as ref accesses.
Problem: After the ref validation improvements in v6, when a component receives props containing both a ref (like [props.myRef] and regular values (like [props.className], ALL property accesses from [props] were being incorrectly flagged with the error "Cannot access refs during render". This caused the compiler to skip compilation of many files that were actually valid.
Root Cause: In [ValidateNoRefAccessInRender.ts] the PropertyLoad case was incorrectly propagating ref types from Structure objects. When [props] was typed as a Structure containing any ref property, accessing ANY property from [props] would inherit the ref type, creating false positives.
Solution: Modified the property load validation to:
Only treat .current property access on actual refs as ref value access
Not automatically propagate ref types when accessing individual properties from structure objects
Allow each property to be independently typed based on its own type information
This prevents false positives like [props.className] being flagged as a ref access just because [props] also contains [props.ref], while maintaining proper validation for actual ref accesses like [ref.current].
Reference: Fixes #34775
How did you test this change?
Added a regression test case ([false-positive-props-ref-access.js]) that reproduces the exact scenario from issue #34775:
A component receives props with both a ref callback and a regular string property
Both properties are accessed in the render
Verified that only the actual ref usage is validated, not the string property
Built the compiler successfully:
cd compiler npm run build
Build completed successfully with the babel-plugin-react-compiler package compiling without errors.
Formatted code:
npx prettier --write ValidateNoRefAccessInRender.ts
All files formatted correctly with no style violations.
Verified no TypeScript/lint errors:
The modified file passes all type checks with no errors.
Expected behavior:
Before: [props.className] would be flagged with "Cannot access refs during render" error
After: Only actual ref accesses (like [props.myRef]) used as a ref, or [ref.current] are validated
Regular prop accesses like [props.className] are no longer incorrectly flagged
The fix ensures property-level type independence, preventing the ref type from "leaking" to all properties of an object that happens to contain a ref.