Skip to content

Fix refs validation for forwarded ref props#36208

Open
fr3y123 wants to merge 3 commits intofacebook:mainfrom
fr3y123:issue-35997-react-hooks-refs
Open

Fix refs validation for forwarded ref props#36208
fr3y123 wants to merge 3 commits intofacebook:mainfrom
fr3y123:issue-35997-react-hooks-refs

Conversation

@fr3y123
Copy link
Copy Markdown

@fr3y123 fr3y123 commented Apr 3, 2026

Fixes #35997

Summary

This fixes a false positive in react-hooks/refs when forwarding a ref prop directly to JSX.

Previously, code like:

function TextArea(props) {
  return <TextInput ref={props.ref} type="body" />;
}

was reported as:

Cannot access refs during render

even though the component was only forwarding the ref object to JSX and not reading ref.current.

The root cause was that ValidateNoRefAccessInRender validated all JSX attribute operands uniformly. That was too strict for the special ref prop, where passing a ref object through to JSX should be allowed.

This change teaches the validator to treat JSX ref attributes specially:

  • still validate the JSX tag
  • still validate non-ref JSX attributes
  • still validate spread attributes and children
  • skip direct-ref-value validation for the ref attribute itself

This preserves the existing error for actual render-time ref reads like props.ref.current, while allowing valid ref forwarding patterns.

How did you test this change?

Reproduced the issue with a focused compiler fixture:

  1. Add a fixture containing:
// @validateRefAccessDuringRender @compilationMode:"infer"
function TextArea(props) {
  return <TextInput ref={props.ref} type="body" />;
}
  1. Run:
corepack yarn workspace babel-plugin-react-compiler snap --pattern allow-forwarding-ref-prop-to-jsx --sync

Before the fix, this failed with:

Error: Cannot access refs during render
...
return <TextInput ref={props.ref} type="body" />;
                         ^^^^^^^^^ Cannot access ref value during render

After the fix, the same targeted fixture passes:

corepack yarn workspace babel-plugin-react-compiler snap --pattern allow-forwarding-ref-prop-to-jsx --sync

I also checked the existing invalid fixture for reading props.ref.current to confirm the validator still rejects direct ref-value access during render.

@meta-cla
Copy link
Copy Markdown

meta-cla bot commented Apr 3, 2026

Hi @fr3y123!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

@meta-cla
Copy link
Copy Markdown

meta-cla bot commented Apr 3, 2026

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

@meta-cla meta-cla bot added the CLA Signed label Apr 3, 2026
@fr3y123 fr3y123 marked this pull request as ready for review April 3, 2026 18:35
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: False postive react-hooks/refs

1 participant