compiler: Allow mutating refs in callbacks passed to JSX

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 {
@@ -521,7 +523,12 @@ class InferenceState {
         break;
       }
       case Effect.Mutate: {
-        if (valueKind.kind === ValueKind.Context) {
+        if (
+          isRefValueType(place.identifier) ||
+          isUseRefType(place.identifier)
+        ) {
+          // no-op: refs are validate via ValidateNoRefAccessInRender
+        } else if (valueKind.kind === ValueKind.Context) {
           functionEffect = {
             kind: "ContextMutation",
             loc: place.loc,
@@ -560,7 +567,12 @@ class InferenceState {
         break;
       }
       case Effect.Store: {
-        if (valueKind.kind === ValueKind.Context) {
+        if (
+          isRefValueType(place.identifier) ||
+          isUseRefType(place.identifier)
+        ) {
+          // no-op: refs are validate via ValidateNoRefAccessInRender
+        } else if (valueKind.kind === ValueKind.Context) {
           functionEffect = {
             kind: "ContextMutation",
             loc: place.loc,

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>

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: [{}],
+};

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>

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: [{}],
+};