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 ( +
+ +
+ ); + } + `, + }, + { + name: 'Allows JSX ref from React 19 props.ref with sibling props', + filename: 'test.tsx', + code: normalizeIndent` + function TextArea(props) { + return ( + + ); + } + `, + }, + { + 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 ( + <> + + + + ); + } + `, + }, + ], + invalid: [ + { + name: 'Reports direct access to props.ref.current during render', + filename: 'test.tsx', + code: normalizeIndent` + function Component(props) { + return
{props.ref.current}
; + } + `, + 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);