[compiler] Fix false positive refs-rule errors when forwarding props.ref

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

@@ -156,6 +156,20 @@ function collectTemporariesSidemap(fn: HIRFunction, env: Env): void {
           ) {
             continue;
           }
+          /*
+           * Skip the temporary alias when the loaded property is itself a ref
+           * (e.g. `props.ref`). The loaded value is a new ref value with its
+           * own env classification; widening env[object] through the alias
+           * would incorrectly make the object appear to be a ref and cause
+           * false positive ref-access errors on unrelated sibling property
+           * reads.
+           */
+          if (
+            isUseRefType(lvalue.identifier) ||
+            isRefValueType(lvalue.identifier)
+          ) {
+            break;
+          }
           const temp = env.lookup(value.object);
           if (temp != null) {
             env.define(lvalue, temp);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-accessing-non-ref-prop-alongside-props-ref.expect.md

@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+
+/**
+ * Regression test for https://github.com/facebook/react/issues/34342
+ * Accessing both `props.ref` and a non-ref sibling property (here
+ * `props.value`) on the same props object should not raise a ref
+ * validation error on the sibling read.
+ */
+function Component(props) {
+  return <div ref={props.ref}>{props.value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+
+/**
+ * Regression test for https://github.com/facebook/react/issues/34342
+ * Accessing both `props.ref` and a non-ref sibling property (here
+ * `props.value`) on the same props object should not raise a ref
+ * validation error on the sibling read.
+ */
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.ref || $[1] !== props.value) {
+    t0 = <div ref={props.ref}>{props.value}</div>;
+    $[0] = props.ref;
+    $[1] = props.value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: "hello" }],
+};
+
+```
+
+### Eval output
+(kind: ok) <div>hello</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-accessing-non-ref-prop-alongside-props-ref.js

@@ -0,0 +1,16 @@
+// @validateRefAccessDuringRender
+
+/**
+ * Regression test for https://github.com/facebook/react/issues/34342
+ * Accessing both `props.ref` and a non-ref sibling property (here
+ * `props.value`) on the same props object should not raise a ref
+ * validation error on the sibling read.
+ */
+function Component(props) {
+  return <div ref={props.ref}>{props.value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello'}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-forwarding-props-ref-does-not-taint-sibling-props.expect.md

@@ -0,0 +1,72 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+
+/**
+ * Regression test for https://github.com/facebook/react/issues/34775
+ * Forwarding `props.ref` to a child component should not cause sibling
+ * property reads from the same `props` object to be flagged as ref accesses.
+ */
+function Field(props) {
+  return (
+    <Control
+      ref={props.ref}
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Field,
+  params: [{placeholder: 'hello', disabled: false}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+
+/**
+ * Regression test for https://github.com/facebook/react/issues/34775
+ * Forwarding `props.ref` to a child component should not cause sibling
+ * property reads from the same `props` object to be flagged as ref accesses.
+ */
+function Field(props) {
+  const $ = _c(4);
+  let t0;
+  if (
+    $[0] !== props.disabled ||
+    $[1] !== props.placeholder ||
+    $[2] !== props.ref
+  ) {
+    t0 = (
+      <Control
+        ref={props.ref}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+      />
+    );
+    $[0] = props.disabled;
+    $[1] = props.placeholder;
+    $[2] = props.ref;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Field,
+  params: [{ placeholder: "hello", disabled: false }],
+};
+
+```
+
+### Eval output
+(kind: exception) Control is not defined

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-forwarding-props-ref-does-not-taint-sibling-props.js

@@ -0,0 +1,21 @@
+// @validateRefAccessDuringRender
+
+/**
+ * Regression test for https://github.com/facebook/react/issues/34775
+ * Forwarding `props.ref` to a child component should not cause sibling
+ * property reads from the same `props` object to be flagged as ref accesses.
+ */
+function Field(props) {
+  return (
+    <Control
+      ref={props.ref}
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+    />
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Field,
+  params: [{placeholder: 'hello', disabled: false}],
+};