Skip to content

Conversation

kuomars110
Copy link

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.

@meta-cla meta-cla bot added the CLA Signed label Oct 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: eslint-react-hooks false positives on refs rule

1 participant