From 0b6a09d95323198ecec2962c941efca4376c2d93 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Mon, 3 Jun 2024 11:31:29 -0700
Subject: [PATCH] compiler: Add support for ref effects

Fixes false positives where we currently disallow mutations of refs from callbacks passed to JSX, if the ref is also passed to jsx. We consider these to be mutations of "frozen" values, but refs are explicitly allowed to have interior mutability.

The fix is to add a new RefMutation variant to FunctionEffect, which we emit whenever a ref is mutated. We disallow this effect type from within a function body, but allow it within function expressions that are passed to useEffect and friends as well as to jsx.

ghstack-source-id: 057e505c16be50d16fc1dc12c1e5ed754ace87ed
Pull Request resolved: https://github.com/facebook/react/pull/29733
---
 .../src/HIR/HIR.ts                            |   4 +
 .../src/Inference/InferReferenceEffects.ts    |  68 +++++++++--
 ...-callback-passed-to-jsx-indirect.expect.md | 109 ++++++++++++++++++
 ...ref-in-callback-passed-to-jsx-indirect.tsx |  28 +++++
 ...ng-ref-in-callback-passed-to-jsx.expect.md |  94 +++++++++++++++
 ...mutating-ref-in-callback-passed-to-jsx.tsx |  24 ++++
 ...-callback-passed-to-jsx-indirect.expect.md | 109 ++++++++++++++++++
 ...rty-in-callback-passed-to-jsx-indirect.tsx |  28 +++++
 ...operty-in-callback-passed-to-jsx.expect.md |  94 +++++++++++++++
 ...ref-property-in-callback-passed-to-jsx.tsx |  24 ++++
 ...-disallow-mutating-ref-in-render.expect.md |  28 +++++
 ...invalid-disallow-mutating-ref-in-render.js |   7 ++
 ...tating-refs-in-render-transitive.expect.md |  33 ++++++
 ...llow-mutating-refs-in-render-transitive.js |  12 ++
 ...d-set-and-read-ref-during-render.expect.md |   4 +-
 ...ef-nested-property-during-render.expect.md |   4 +-
 ...rite-but-dont-read-ref-in-render.expect.md |   2 +-
 17 files changed, 658 insertions(+), 14 deletions(-)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
index f9dfea52f363e..c02fe5af10301 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
@@ -291,6 +291,10 @@ export type FunctionEffect =
       kind: "GlobalMutation";
       error: CompilerErrorDetailOptions;
     }
+  | {
+      kind: "RefMutation";
+      error: CompilerErrorDetailOptions;
+    }
   | {
       kind: "ReactMutation";
       error: CompilerErrorDetailOptions;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferReferenceEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferReferenceEffects.ts
index 520684c026bda..7b9d81d81a9be 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferReferenceEffects.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferReferenceEffects.ts
@@ -29,6 +29,8 @@ import {
   isArrayType,
   isMutableEffect,
   isObjectType,
+  isRefValueType,
+  isUseRefType,
 } from "../HIR/HIR";
 import { FunctionSignature } from "../HIR/ObjectShape";
 import {
@@ -239,7 +241,8 @@ export default function inferReferenceEffects(
     functionEffects.forEach((eff) => {
       switch (eff.kind) {
         case "ReactMutation":
-        case "GlobalMutation": {
+        case "GlobalMutation":
+        case "RefMutation": {
           CompilerError.throw(eff.error);
         }
         case "ContextMutation": {
@@ -407,7 +410,8 @@ class InferenceState {
         for (const effect of value.loweredFunc.func.effects) {
           if (
             effect.kind === "GlobalMutation" ||
-            effect.kind === "ReactMutation"
+            effect.kind === "ReactMutation" ||
+            effect.kind === "RefMutation"
           ) {
             // Known effects are always propagated upwards
             functionEffects.push(effect);
@@ -521,7 +525,28 @@ class InferenceState {
         break;
       }
       case Effect.Mutate: {
-        if (valueKind.kind === ValueKind.Context) {
+        if (
+          isRefValueType(place.identifier) ||
+          isUseRefType(place.identifier)
+        ) {
+          if (this.#env.config.validateRefAccessDuringRender) {
+            functionEffect = {
+              kind: "RefMutation",
+              error: {
+                reason:
+                  "Ref values (the `current` property) may not be modified during render. (https://react.dev/reference/react/useRef)",
+                description:
+                  place.identifier.name !== null &&
+                  place.identifier.name.kind === "named"
+                    ? `Found mutation of \`${place.identifier.name.value}\``
+                    : null,
+                loc: place.loc,
+                suggestions: null,
+                severity: ErrorSeverity.InvalidReact,
+              },
+            };
+          }
+        } else if (valueKind.kind === ValueKind.Context) {
           functionEffect = {
             kind: "ContextMutation",
             loc: place.loc,
@@ -560,7 +585,28 @@ class InferenceState {
         break;
       }
       case Effect.Store: {
-        if (valueKind.kind === ValueKind.Context) {
+        if (
+          isRefValueType(place.identifier) ||
+          isUseRefType(place.identifier)
+        ) {
+          if (this.#env.config.validateRefAccessDuringRender) {
+            functionEffect = {
+              kind: "RefMutation",
+              error: {
+                reason:
+                  "Ref values (the `current` property) may not be modified during render. (https://react.dev/reference/react/useRef)",
+                description:
+                  place.identifier.name !== null &&
+                  place.identifier.name.kind === "named"
+                    ? `Found mutation of \`${place.identifier.name.value}\``
+                    : null,
+                loc: place.loc,
+                suggestions: null,
+                severity: ErrorSeverity.InvalidReact,
+              },
+            };
+          }
+        } else if (valueKind.kind === ValueKind.Context) {
           functionEffect = {
             kind: "ContextMutation",
             loc: place.loc,
@@ -1139,7 +1185,9 @@ function inferBlock(
             );
             functionEffects.push(
               ...propEffects.filter(
-                (propEffect) => propEffect.kind !== "GlobalMutation"
+                (propEffect) =>
+                  propEffect.kind !== "GlobalMutation" &&
+                  propEffect.kind !== "RefMutation"
               )
             );
           }
@@ -1333,7 +1381,10 @@ function inferBlock(
           functionEffects.push(
             ...argumentEffects.filter(
               (argEffect) =>
-                !isUseEffect || i !== 0 || argEffect.kind !== "GlobalMutation"
+                !isUseEffect ||
+                i !== 0 ||
+                (argEffect.kind !== "GlobalMutation" &&
+                  argEffect.kind !== "RefMutation")
             )
           );
           hasCaptureArgument ||= place.effect === Effect.Capture;
@@ -1462,7 +1513,10 @@ function inferBlock(
           functionEffects.push(
             ...argumentEffects.filter(
               (argEffect) =>
-                !isUseEffect || i !== 0 || argEffect.kind !== "GlobalMutation"
+                !isUseEffect ||
+                i !== 0 ||
+                (argEffect.kind !== "GlobalMutation" &&
+                  argEffect.kind !== "RefMutation")
             )
           );
           hasCaptureArgument ||= place.effect === Effect.Capture;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md
new file mode 100644
index 0000000000000..539c9e71ec828
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md
@@ -0,0 +1,109 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const ref = useRef(null);
+
+  const setRef = () => {
+    if (ref.current !== null) {
+      ref.current = "";
+    }
+  };
+
+  const onClick = () => {
+    setRef();
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const $ = _c(10);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      if (ref.current !== null) {
+        ref.current = "";
+      }
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const setRef = t0;
+  let t1;
+  if ($[1] !== setRef) {
+    t1 = () => {
+      setRef();
+    };
+    $[1] = setRef;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const onClick = t1;
+  let t2;
+  if ($[3] !== ref) {
+    t2 = <input ref={ref} />;
+    $[3] = ref;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== onClick) {
+    t3 = <button onClick={onClick} />;
+    $[5] = onClick;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== t2 || $[8] !== t3) {
+    t4 = (
+      <>
+        {t2}
+        {t3}
+      </>
+    );
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input><button></button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.tsx
new file mode 100644
index 0000000000000..14a5fd9aa5bc4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.tsx
@@ -0,0 +1,28 @@
+// @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const ref = useRef(null);
+
+  const setRef = () => {
+    if (ref.current !== null) {
+      ref.current = "";
+    }
+  };
+
+  const onClick = () => {
+    setRef();
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md
new file mode 100644
index 0000000000000..5a70f6c86eeca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.expect.md
@@ -0,0 +1,94 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const ref = useRef(null);
+
+  const onClick = () => {
+    if (ref.current !== null) {
+      ref.current = "";
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const $ = _c(8);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      if (ref.current !== null) {
+        ref.current = "";
+      }
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[1] !== ref) {
+    t1 = <input ref={ref} />;
+    $[1] = ref;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== onClick) {
+    t2 = <button onClick={onClick} />;
+    $[3] = onClick;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t1 || $[6] !== t2) {
+    t3 = (
+      <>
+        {t1}
+        {t2}
+      </>
+    );
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input><button></button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.tsx
new file mode 100644
index 0000000000000..74410e119a285
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx.tsx
@@ -0,0 +1,24 @@
+// @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const ref = useRef(null);
+
+  const onClick = () => {
+    if (ref.current !== null) {
+      ref.current = "";
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md
new file mode 100644
index 0000000000000..088ad294ef7b8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md
@@ -0,0 +1,109 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const ref = useRef(null);
+
+  const setRef = () => {
+    if (ref.current !== null) {
+      ref.current.value = "";
+    }
+  };
+
+  const onClick = () => {
+    setRef();
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const $ = _c(10);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      if (ref.current !== null) {
+        ref.current.value = "";
+      }
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const setRef = t0;
+  let t1;
+  if ($[1] !== setRef) {
+    t1 = () => {
+      setRef();
+    };
+    $[1] = setRef;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const onClick = t1;
+  let t2;
+  if ($[3] !== ref) {
+    t2 = <input ref={ref} />;
+    $[3] = ref;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== onClick) {
+    t3 = <button onClick={onClick} />;
+    $[5] = onClick;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== t2 || $[8] !== t3) {
+    t4 = (
+      <>
+        {t2}
+        {t3}
+      </>
+    );
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input><button></button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.tsx
new file mode 100644
index 0000000000000..87cc6d42446be
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.tsx
@@ -0,0 +1,28 @@
+// @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const ref = useRef(null);
+
+  const setRef = () => {
+    if (ref.current !== null) {
+      ref.current.value = "";
+    }
+  };
+
+  const onClick = () => {
+    setRef();
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.expect.md
new file mode 100644
index 0000000000000..f0c115952fa6e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.expect.md
@@ -0,0 +1,94 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const ref = useRef(null);
+
+  const onClick = () => {
+    if (ref.current !== null) {
+      ref.current.value = "";
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const $ = _c(8);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      if (ref.current !== null) {
+        ref.current.value = "";
+      }
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const onClick = t0;
+  let t1;
+  if ($[1] !== ref) {
+    t1 = <input ref={ref} />;
+    $[1] = ref;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== onClick) {
+    t2 = <button onClick={onClick} />;
+    $[3] = onClick;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== t1 || $[6] !== t2) {
+    t3 = (
+      <>
+        {t1}
+        {t2}
+      </>
+    );
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input><button></button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.tsx
new file mode 100644
index 0000000000000..b9b7a2dd8e67b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx.tsx
@@ -0,0 +1,24 @@
+// @validateRefAccessDuringRender
+import { useRef } from "react";
+
+function Component() {
+  const ref = useRef(null);
+
+  const onClick = () => {
+    if (ref.current !== null) {
+      ref.current.value = "";
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={onClick} />
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md
new file mode 100644
index 0000000000000..fb6dccddea589
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.expect.md
@@ -0,0 +1,28 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Component() {
+  const ref = useRef(null);
+  ref.current = false;
+
+  return <button ref={ref} />;
+}
+
+```
+
+
+## Error
+
+```
+  2 | function Component() {
+  3 |   const ref = useRef(null);
+> 4 |   ref.current = false;
+    |   ^^^ InvalidReact: Ref values (the `current` property) may not be modified during render. (https://react.dev/reference/react/useRef) (4:4)
+  5 |
+  6 |   return <button ref={ref} />;
+  7 | }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.js
new file mode 100644
index 0000000000000..714eb2d32065d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-ref-in-render.js
@@ -0,0 +1,7 @@
+// @validateRefAccessDuringRender
+function Component() {
+  const ref = useRef(null);
+  ref.current = false;
+
+  return <button ref={ref} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
new file mode 100644
index 0000000000000..896d0a4543840
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+function Component() {
+  const ref = useRef(null);
+
+  const setRef = () => {
+    ref.current = false;
+  };
+  const changeRef = setRef;
+  changeRef();
+
+  return <button ref={ref} />;
+}
+
+```
+
+
+## Error
+
+```
+  4 |
+  5 |   const setRef = () => {
+> 6 |     ref.current = false;
+    |     ^^^ InvalidReact: Ref values (the `current` property) may not be modified during render. (https://react.dev/reference/react/useRef) (6:6)
+  7 |   };
+  8 |   const changeRef = setRef;
+  9 |   changeRef();
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.js
new file mode 100644
index 0000000000000..93857a55645a5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.js
@@ -0,0 +1,12 @@
+// @validateRefAccessDuringRender
+function Component() {
+  const ref = useRef(null);
+
+  const setRef = () => {
+    ref.current = false;
+  };
+  const changeRef = setRef;
+  changeRef();
+
+  return <button ref={ref} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
index 5db1568427835..fa4ae5d581eb0 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
@@ -18,9 +18,7 @@ function Component(props) {
   2 | function Component(props) {
   3 |   const ref = useRef(null);
 > 4 |   ref.current = props.value;
-    |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
-
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $24:TObject<BuiltInRefValue> (5:5)
+    |   ^^^ InvalidReact: Ref values (the `current` property) may not be modified during render. (https://react.dev/reference/react/useRef) (4:4)
   5 |   return ref.current;
   6 | }
   7 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
index 4d8cb2ae7c41d..815796e432b32 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
@@ -18,9 +18,7 @@ function Component(props) {
   2 | function Component(props) {
   3 |   const ref = useRef({ inner: null });
 > 4 |   ref.current.inner = props.value;
-    |   ^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (4:4)
-
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $30:TObject<BuiltInRefValue> (5:5)
+    |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be modified during render. (https://react.dev/reference/react/useRef) (4:4)
   5 |   return ref.current.inner;
   6 | }
   7 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md
index 7b57eeab4dbbc..fc0eca939a4de 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-write-but-dont-read-ref-in-render.expect.md
@@ -20,7 +20,7 @@ function useHook({ value }) {
   3 |   const ref = useRef(null);
   4 |   // Writing to a ref in render is against the rules:
 > 5 |   ref.current = value;
-    |   ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (5:5)
+    |   ^^^ InvalidReact: Ref values (the `current` property) may not be modified during render. (https://react.dev/reference/react/useRef) (5:5)
   6 |   // returning a ref is allowed, so this alone doesn't trigger an error:
   7 |   return ref;
   8 | }