From c714b9fcdeb08b1da4882f9bef9d3ef8fbb11dc8 Mon Sep 17 00:00:00 2001
From: Raashish Aggarwal <94279692+raashish1601@users.noreply.github.com>
Date: Tue, 5 May 2026 18:35:05 +0530
Subject: [PATCH] Fix refs rule JSX prop aliasing

---
 .../Validation/ValidateNoRefAccessInRender.ts | 13 ----
 .../ReactCompilerRuleTypescript-test.ts       | 73 +++++++++++++++++++
 2 files changed, 73 insertions(+), 13 deletions(-)

diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts
index 7da564205475..416398d79fea 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts
@@ -149,19 +149,6 @@ function collectTemporariesSidemap(fn: HIRFunction, env: Env): void {
           }
           break;
         }
-        case 'PropertyLoad': {
-          if (
-            isUseRefType(value.object.identifier) &&
-            value.property === 'current'
-          ) {
-            continue;
-          }
-          const temp = env.lookup(value.object);
-          if (temp != null) {
-            env.define(lvalue, temp);
-          }
-          break;
-        }
       }
     }
   }
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts b/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts
index a0d0f6bdbc8e..a5e7e111f81d 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts
+++ b/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts
@@ -195,7 +195,80 @@ const tests: CompilerTestCases = {
   ],
 };
 
+const refsTests: CompilerTestCases = {
+  valid: [
+    {
+      name: 'Allows JSX ref from a props member without marking all props as refs',
+      filename: 'test.tsx',
+      code: normalizeIndent`
+        function Test(props) {
+          return (
+            <div>
+              <button ref={props.buttonRef}>
+                {props.text}
+              </button>
+            </div>
+          );
+        }
+      `,
+    },
+    {
+      name: 'Allows JSX ref from React 19 props.ref with sibling props',
+      filename: 'test.tsx',
+      code: normalizeIndent`
+        function TextArea(props) {
+          return (
+            <TextInput
+              ref={props.ref}
+              placeholder={props.placeholder}
+              type="body"
+            />
+          );
+        }
+      `,
+    },
+    {
+      name: 'Allows JSX refs stored as object properties',
+      filename: 'test.tsx',
+      code: normalizeIndent`
+        import {useRef} from 'react';
+
+        function App() {
+          const groupRefs = {
+            group1: useRef(null),
+            group2: useRef(null),
+          };
+
+          return (
+            <>
+              <ComboBoxItemGroup ref={groupRefs.group1} />
+              <ComboBoxItemGroup ref={groupRefs.group2} />
+            </>
+          );
+        }
+      `,
+    },
+  ],
+  invalid: [
+    {
+      name: 'Reports direct access to props.ref.current during render',
+      filename: 'test.tsx',
+      code: normalizeIndent`
+        function Component(props) {
+          return <div>{props.ref.current}</div>;
+        }
+      `,
+      errors: [
+        {
+          message: /Cannot access ref value during render/,
+        },
+      ],
+    },
+  ],
+};
+
 const eslintTester = new ESLintTesterV8({
   parser: require.resolve('@typescript-eslint/parser-v5'),
 });
 eslintTester.run('react-compiler', allRules['immutability'].rule, tests);
+eslintTester.run('react-compiler refs', allRules['refs'].rule, refsTests);