[compiler] Don't error on ref-in-render on StartMemoize

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

@@ -185,6 +185,9 @@ function validateNoRefAccessInRenderImpl(
           }
           break;
         }
+        case 'StartMemoize':
+        case 'FinishMemoize':
+          break;
         default: {
           for (const operand of eachInstructionValueOperand(instr.value)) {
             validateNoRefValueAccess(errors, refAccessingFunctions, operand);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md

@@ -31,23 +31,13 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-   5 |   const ref = useRef({inner: null});
-   6 |
->  7 |   const onChange = useCallback(event => {
-     |                                ^^^^^^^^^^
->  8 |     // The ref should still be mutable here even though function deps are frozen in
-     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
->  9 |     // @enablePreserveExistingMemoizationGuarantees mode
-     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-> 10 |     ref.current.inner = event.target.value;
-     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-> 11 |   });
-     | ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $44:TObject<BuiltInFunction> (7:11)
-
-InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (14:14)
   12 |
   13 |   // The ref is modified later, extending its range and preventing memoization of onChange
-  14 |   ref.current.inner = null;
+> 14 |   ref.current.inner = null;
+     |   ^^^^^^^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (14:14)
+  15 |
+  16 |   return <input onChange={onChange} />;
+  17 | }
 ```
 
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md

@@ -34,25 +34,15 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-   5 |   const ref = useRef({inner: null});
-   6 |
->  7 |   const onChange = useCallback(event => {
-     |                                ^^^^^^^^^^
->  8 |     // The ref should still be mutable here even though function deps are frozen in
-     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
->  9 |     // @enablePreserveExistingMemoizationGuarantees mode
-     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-> 10 |     ref.current.inner = event.target.value;
-     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-> 11 |   });
-     | ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $53:TObject<BuiltInFunction> (7:11)
-
-InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef). Function mutate? $77[20:22]:TObject<BuiltInFunction> accesses a ref (17:17)
+  15 |     ref.current.inner = null;
+  16 |   };
+> 17 |   reset();
+     |   ^^^^^ InvalidReact: This function accesses a ref value (the `current` property), which may not be accessed during render. (https://react.dev/reference/react/useRef). Function mutate? $77[20:22]:TObject<BuiltInFunction> accesses a ref (17:17)
 
 InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (17:17)
-  12 |
-  13 |   // The ref is modified later, extending its range and preventing memoization of onChange
-  14 |   const reset = () => {
+  18 |
+  19 |   return <input onChange={onChange} />;
+  20 | }
 ```
 
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.expect.md

@@ -0,0 +1,76 @@
+
+## Input
+
+```javascript
+// @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+component Foo() {
+  const ref = useRef();
+
+  const s = useCallback(() => {
+    return ref.current;
+  });
+
+  return <A r={s} />;
+}
+
+component A(r: mixed) {
+  return <div />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useCallback, useRef } from "react";
+
+function Foo() {
+  const $ = _c(2);
+  const ref = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => ref.current;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const s = t0;
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <A r={s} />;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function A(t0) {
+  const $ = _c(1);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div />;
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [],
+};
+
+```
+
+### Eval output
+(kind: ok) <div></div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-ref-in-render.js → compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useCallback-ref-in-render.js

@@ -1,4 +1,5 @@
 // @flow @validateRefAccessDuringRender @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
 
 component Foo() {
   const ref = useRef();
@@ -7,7 +8,11 @@ component Foo() {
     return ref.current;
   });
 
-  return <a r={s} />;
+  return <A r={s} />;
+}
+
+component A(r: mixed) {
+  return <div />;
 }
 
 export const FIXTURE_ENTRYPOINT = {