[compiler] Exclude refs and ref values from having mutable ranges

compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutableLifetimes.ts

@@ -11,6 +11,8 @@ import {
   Identifier,
   InstructionId,
   InstructionKind,
+  isRefValueType,
+  isUseRefType,
   makeInstructionId,
   Place,
 } from '../HIR/HIR';
@@ -66,7 +68,9 @@ import {assertExhaustive} from '../Utils/utils';
  */
 
 function infer(place: Place, instrId: InstructionId): void {
-  place.identifier.mutableRange.end = makeInstructionId(instrId + 1);
+  if (!isUseRefType(place.identifier) && !isRefValueType(place.identifier)) {
+    place.identifier.mutableRange.end = makeInstructionId(instrId + 1);
+  }
 }
 
 function inferPlace(
@@ -171,7 +175,11 @@ export function inferMutableLifetimes(
         const declaration = contextVariableDeclarationInstructions.get(
           instr.value.lvalue.place.identifier,
         );
-        if (declaration != null) {
+        if (
+          declaration != null &&
+          !isRefValueType(instr.value.lvalue.place.identifier) &&
+          !isUseRefType(instr.value.lvalue.place.identifier)
+        ) {
           const range = instr.value.lvalue.place.identifier.mutableRange;
           if (range.start === 0) {
             range.start = declaration;

compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutableRangesForAlias.ts

@@ -5,7 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {HIRFunction, Identifier, InstructionId} from '../HIR/HIR';
+import {
+  HIRFunction,
+  Identifier,
+  InstructionId,
+  isRefValueType,
+  isUseRefType,
+} from '../HIR/HIR';
 import DisjointSet from '../Utils/DisjointSet';
 
 export function inferMutableRangesForAlias(
@@ -19,7 +25,10 @@ export function inferMutableRangesForAlias(
      * mutated.
      */
     const mutatingIdentifiers = [...aliasSet].filter(
-      id => id.mutableRange.end - id.mutableRange.start > 1,
+      id =>
+        id.mutableRange.end - id.mutableRange.start > 1 &&
+        !isUseRefType(id) &&
+        !isRefValueType(id),
     );
 
     if (mutatingIdentifiers.length > 0) {
@@ -36,7 +45,11 @@ export function inferMutableRangesForAlias(
        * last mutation.
        */
       for (const alias of aliasSet) {
-        if (alias.mutableRange.end < lastMutatingInstructionId) {
+        if (
+          alias.mutableRange.end < lastMutatingInstructionId &&
+          !isUseRefType(alias) &&
+          !isRefValueType(alias)
+        ) {
           alias.mutableRange.end = lastMutatingInstructionId as InstructionId;
         }
       }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md

@@ -36,27 +36,26 @@ import { useRef } from "react";
 import { addOne } from "shared-runtime";
 
 function useKeyCommand() {
-  const $ = _c(2);
+  const $ = _c(1);
   const currentPosition = useRef(0);
-  const handleKey = (direction) => () => {
-    const position = currentPosition.current;
-    const nextPosition = direction === "left" ? addOne(position) : position;
-    currentPosition.current = nextPosition;
-  };
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const handleKey = (direction) => () => {
+      const position = currentPosition.current;
+      const nextPosition = direction === "left" ? addOne(position) : position;
+      currentPosition.current = nextPosition;
+    };
 
-  const moveLeft = { handler: handleKey("left") };
+    const moveLeft = { handler: handleKey("left") };
 
-  const t0 = handleKey("right");
-  let t1;
-  if ($[0] !== t0) {
-    t1 = { handler: t0 };
+    const moveRight = { handler: handleKey("right") };
+
+    t0 = [moveLeft, moveRight];
     $[0] = t0;
-    $[1] = t1;
   } else {
-    t1 = $[1];
+    t0 = $[0];
   }
-  const moveRight = t1;
-  return [moveLeft, moveRight];
+  return t0;
 }
 
 export const FIXTURE_ENTRYPOINT = {

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

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees
+// @enablePreserveExistingMemoizationGuarantees @validateRefAccessDuringRender
 import {useCallback, useRef} from 'react';
 
 function Component(props) {
@@ -42,7 +42,9 @@ export const FIXTURE_ENTRYPOINT = {
 > 10 |     ref.current.inner = event.target.value;
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 > 11 |   });
-     | ^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output. (7: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;

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

@@ -1,4 +1,4 @@
-// @enablePreserveExistingMemoizationGuarantees
+// @enablePreserveExistingMemoizationGuarantees @validateRefAccessDuringRender
 import {useCallback, useRef} from 'react';
 
 function Component(props) {

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

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @enablePreserveExistingMemoizationGuarantees
+// @enablePreserveExistingMemoizationGuarantees @validateRefAccessDuringRender
 import {useCallback, useRef} from 'react';
 
 function Component(props) {
@@ -45,7 +45,11 @@ export const FIXTURE_ENTRYPOINT = {
 > 10 |     ref.current.inner = event.target.value;
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 > 11 |   });
-     | ^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output. (7: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)
+
+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 = () => {

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

@@ -1,4 +1,4 @@
-// @enablePreserveExistingMemoizationGuarantees
+// @enablePreserveExistingMemoizationGuarantees @validateRefAccessDuringRender
 import {useCallback, useRef} from 'react';
 
 function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/capture-ref-for-later-mutation.expect.md

@@ -37,42 +37,26 @@ import { useRef } from "react";
 import { addOne } from "shared-runtime";
 
 function useKeyCommand() {
-  const $ = _c(6);
+  const $ = _c(1);
   const currentPosition = useRef(0);
-  const handleKey = (direction) => () => {
-    const position = currentPosition.current;
-    const nextPosition = direction === "left" ? addOne(position) : position;
-    currentPosition.current = nextPosition;
-  };
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = { handler: handleKey("left") };
+    const handleKey = (direction) => () => {
+      const position = currentPosition.current;
+      const nextPosition = direction === "left" ? addOne(position) : position;
+      currentPosition.current = nextPosition;
+    };
+
+    const moveLeft = { handler: handleKey("left") };
+
+    const moveRight = { handler: handleKey("right") };
+
+    t0 = [moveLeft, moveRight];
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  const moveLeft = t0;
-
-  const t1 = handleKey("right");
-  let t2;
-  if ($[1] !== t1) {
-    t2 = { handler: t1 };
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  const moveRight = t2;
-  let t3;
-  if ($[3] !== moveLeft || $[4] !== moveRight) {
-    t3 = [moveLeft, moveRight];
-    $[3] = moveLeft;
-    $[4] = moveRight;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  return t3;
+  return t0;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md

@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees:true
+
+import {useRef, useMemo} from 'react';
+import {makeArray} from 'shared-runtime';
+
+function useFoo() {
+  const r = useRef();
+  return useMemo(() => makeArray(r), []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees:true
+
+import { useRef, useMemo } from "react";
+import { makeArray } from "shared-runtime";
+
+function useFoo() {
+  const $ = _c(1);
+  const r = useRef();
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = makeArray(r);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  t0 = t1;
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+### Eval output
+(kind: ok) [{}]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-ref-mutable-range.expect.md

@@ -31,7 +31,7 @@ import { c as _c } from "react/compiler-runtime";
 import { Stringify, identity, mutate, CONST_TRUE } from "shared-runtime";
 
 function Foo(props, ref) {
-  const $ = _c(5);
+  const $ = _c(7);
   let value;
   let t0;
   if ($[0] !== ref) {
@@ -45,19 +45,6 @@ function Foo(props, ref) {
       }
 
       mutate(value);
-      if (CONST_TRUE) {
-        const t1 = identity(ref);
-        let t2;
-        if ($[3] !== t1) {
-          t2 = <Stringify ref={t1} />;
-          $[3] = t1;
-          $[4] = t2;
-        } else {
-          t2 = $[4];
-        }
-        t0 = t2;
-        break bb0;
-      }
     }
     $[0] = ref;
     $[1] = value;
@@ -69,6 +56,25 @@ function Foo(props, ref) {
   if (t0 !== Symbol.for("react.early_return_sentinel")) {
     return t0;
   }
+  if (CONST_TRUE) {
+    let t1;
+    if ($[3] !== ref) {
+      t1 = identity(ref);
+      $[3] = ref;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    let t2;
+    if ($[5] !== t1) {
+      t2 = <Stringify ref={t1} />;
+      $[5] = t1;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    return t2;
+  }
   return value;
 }