Refs rule in object

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts

@@ -151,16 +151,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;
         }
       }
@@ -375,7 +365,7 @@ function validateNoRefAccessInRenderImpl(
             const objType = env.get(instr.value.object.identifier.id);
             let lookupType: null | RefAccessType = null;
             if (objType?.kind === 'Structure') {
-              lookupType = objType.value;
+              lookupType = objType.value ?? objType;
             } else if (objType?.kind === 'Ref') {
               lookupType = {
                 kind: 'RefValue',

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-in-object-as-props.expect.md

@@ -0,0 +1,51 @@
+## Input
+
+```javascript
+function Component() {
+  const groupRefs = {
+    group1: useRef(null),
+    group2: useRef(null),
+  };
+  return (
+    <>
+      <Child ref={groupRefs.group1} />
+      <Child ref={groupRefs.group2} />
+    </>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = { group1: useRef(null), group2: useRef(null) };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const groupRefs = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
+      <>
+        <Child ref={groupRefs.group1} />
+        <Child ref={groupRefs.group2} />
+      </>
+    );
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+```
+
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-passing-refs-in-object-as-props.js

@@ -0,0 +1,12 @@
+function Component() {
+  const groupRefs = {
+    group1: useRef(null),
+    group2: useRef(null),
+  };
+  return (
+    <>
+      <Child ref={groupRefs.group1} />
+      <Child ref={groupRefs.group2} />
+    </>
+  );
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md

@@ -41,13 +41,12 @@ Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.invalid-use-ref-added-to-dep-without-type-info.ts:12:28
-  10 |   const x = {a, val: val.ref.current};
+error.invalid-use-ref-added-to-dep-without-type-info.ts:10:21
+   8 |   // however, this is an instance of accessing a ref during render and is disallowed
+   9 |   // under React's rules, so we reject this input
+> 10 |   const x = {a, val: val.ref.current};
+     |                      ^^^^^^^^^^^^^^^ Cannot access ref value during render
   11 |
-> 12 |   return <VideoList videos={x} />;
-     |                             ^ Cannot access ref value during render
+  12 |   return <VideoList videos={x} />;
   13 | }
-  14 |
 ```
-          
-