[compiler][rfc] enableTreatFunctionDepsAsConditional by default

compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts

@@ -457,9 +457,10 @@ const EnvironmentConfigSchema = z.object({
   throwUnknownException__testonly: z.boolean().default(false),
 
   /**
-   * Enables deps of a function epxression to be treated as conditional. This
-   * makes sure we don't load a dep when it's a property (to check if it has
-   * changed) and instead check the receiver.
+   * Enables deps of a function expression to be treated as conditional. This
+   * makes sure we don't hoist property loads from function expressions when we
+   * don't know that the property load source object is safe to access in the
+   * outer context
    *
    * This makes sure we don't end up throwing when the reciver is null. Consider
    * this code:
@@ -475,8 +476,14 @@ const EnvironmentConfigSchema = z.object({
    *
    * This does cause the memoization to now be coarse grained, which is
    * non-ideal.
+   *
+   * This is safe to toggle off for a codebase that has no sources of
+   * unsoundness. This includes:
+   * - typing array accesses / other unknown keys as TValue | undefined
+   *   (typescript's noUncheckedIndexedAccess)
+   * - enabling and monitoring warnings for explicit and inferred `any`
    */
-  enableTreatFunctionDepsAsConditional: z.boolean().default(false),
+  enableTreatFunctionDepsAsConditional: z.boolean().default(true),
 
   /**
    * When true, always act as though the dependencies of a memoized value

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-aliased-capture-aliased-mutate.expect.md

@@ -75,9 +75,9 @@ function useFoo(t0) {
     arrayPush(x, y);
     const y_alias = y;
     let t2;
-    if ($[3] !== y_alias.value) {
+    if ($[3] !== y_alias) {
       t2 = () => y_alias.value;
-      $[3] = y_alias.value;
+      $[3] = y_alias;
       $[4] = t2;
     } else {
       t2 = $[4];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-aliased-capture-mutate.expect.md

@@ -56,9 +56,9 @@ function useFoo(t0) {
     setPropertyByKey(obj, "arr", arr);
     const obj_alias = obj;
     let t2;
-    if ($[2] !== obj_alias.arr.length) {
+    if ($[2] !== obj_alias) {
       t2 = () => obj_alias.arr.length;
-      $[2] = obj_alias.arr.length;
+      $[2] = obj_alias;
       $[3] = t2;
     } else {
       t2 = $[3];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-arguments.expect.md

@@ -22,11 +22,11 @@ import { c as _c } from "react/compiler-runtime";
 function Foo(props) {
   const $ = _c(2);
   let t0;
-  if ($[0] !== props.router.location) {
+  if ($[0] !== props.router) {
     t0 = (reason) => {
       log(props.router.location);
     };
-    $[0] = props.router.location;
+    $[0] = props.router;
     $[1] = t0;
   } else {
     t0 = $[1];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-call.expect.md

@@ -35,11 +35,11 @@ function component(t0) {
   }
   const poke = t1;
   let t2;
-  if ($[2] !== mutator.user) {
+  if ($[2] !== mutator) {
     t2 = () => {
       mutator.user.hide();
     };
-    $[2] = mutator.user;
+    $[2] = mutator;
     $[3] = t2;
   } else {
     t2 = $[3];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-member-expr.expect.md

@@ -34,11 +34,11 @@ function component(a) {
   }
   const z = t0;
   let t1;
-  if ($[2] !== z.a) {
+  if ($[2] !== z) {
     t1 = function () {
       console.log(z.a);
     };
-    $[2] = z.a;
+    $[2] = z;
     $[3] = t1;
   } else {
     t1 = $[3];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr-in-nested-func.expect.md

@@ -36,13 +36,13 @@ function component(a) {
   }
   const z = t0;
   let t1;
-  if ($[2] !== z.a.a) {
+  if ($[2] !== z) {
     t1 = function () {
       (function () {
         console.log(z.a.a);
       })();
     };
-    $[2] = z.a.a;
+    $[2] = z;
     $[3] = t1;
   } else {
     t1 = $[3];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-nested-member-expr.expect.md

@@ -34,11 +34,11 @@ function component(a) {
   }
   const z = t0;
   let t1;
-  if ($[2] !== z.a.a) {
+  if ($[2] !== z) {
     t1 = function () {
       console.log(z.a.a);
     };
-    $[2] = z.a.a;
+    $[2] = z;
     $[3] = t1;
   } else {
     t1 = $[3];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md

@@ -97,15 +97,15 @@ function Component(props) {
     }
     const urls = t5;
     let t6;
-    if ($[6] !== comments.length) {
+    if ($[6] !== comments) {
       t6 = (e) => {
         if (!comments.length) {
           return;
         }
 
         console.log(comments.length);
       };
-      $[6] = comments.length;
+      $[6] = comments;
       $[7] = t6;
     } else {
       t6 = $[7];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md

@@ -56,15 +56,15 @@ function Component(props) {
 
     const { media, comments, urls } = post;
     let t1;
-    if ($[2] !== comments.length) {
+    if ($[2] !== comments) {
       t1 = (e) => {
         if (!comments.length) {
           return;
         }
 
         console.log(comments.length);
       };
-      $[2] = comments.length;
+      $[2] = comments;
       $[3] = t1;
     } else {
       t1 = $[3];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.expect.md

@@ -23,11 +23,11 @@ import { c as _c } from "react/compiler-runtime";
 function Component(props) {
   const $ = _c(4);
   let t0;
-  if ($[0] !== props.name) {
+  if ($[0] !== props) {
     t0 = function () {
       return <div>{props.name}</div>;
     };
-    $[0] = props.name;
+    $[0] = props;
     $[1] = t0;
   } else {
     t0 = $[1];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useCallback-read-maybeRef.expect.md

@@ -0,0 +1,38 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback} from 'react';
+
+function useHook(maybeRef) {
+  return useCallback(() => {
+    return [maybeRef.current];
+  }, [maybeRef]);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useCallback } from "react";
+
+function useHook(maybeRef) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== maybeRef) {
+    t0 = () => [maybeRef.current];
+    $[0] = maybeRef;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useMemo-read-maybeRef.expect.md

@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useMemo} from 'react';
+
+function useHook(maybeRef) {
+  return useMemo(() => {
+    return () => [maybeRef.current];
+  }, [maybeRef]);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
+import { useMemo } from "react";
+
+function useHook(maybeRef) {
+  const $ = _c(2);
+  let t0;
+  let t1;
+  if ($[0] !== maybeRef) {
+    t1 = () => [maybeRef.current];
+    $[0] = maybeRef;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  t0 = t1;
+  return t0;
+}
+
+```
+
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-invalid-useMemo-read-maybeRef.ts → compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useMemo-read-maybeRef.ts

@@ -1,8 +1,8 @@
 // @validatePreserveExistingMemoizationGuarantees
 import {useMemo} from 'react';
 
-function useHook(maybeRef, shouldRead) {
+function useHook(maybeRef) {
   return useMemo(() => {
     return () => [maybeRef.current];
-  }, [shouldRead, maybeRef]);
+  }, [maybeRef]);
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-alias-property-load-dep.expect.md

@@ -9,13 +9,13 @@ import {sum} from 'shared-runtime';
 function Component({propA, propB}) {
   const x = propB.x.y;
   return useCallback(() => {
-    return sum(propA.x, x);
-  }, [propA.x, x]);
+    return sum(propA, x);
+  }, [propA, x]);
 }
 
 export const FIXTURE_ENTRYPOINT = {
   fn: Component,
-  params: [{propA: {x: 2}, propB: {x: {y: 3}}}],
+  params: [{propA: 2, propB: {x: {y: 3}}}],
 };
 
 ```
@@ -32,9 +32,9 @@ function Component(t0) {
   const { propA, propB } = t0;
   const x = propB.x.y;
   let t1;
-  if ($[0] !== propA.x || $[1] !== x) {
-    t1 = () => sum(propA.x, x);
-    $[0] = propA.x;
+  if ($[0] !== propA || $[1] !== x) {
+    t1 = () => sum(propA, x);
+    $[0] = propA;
     $[1] = x;
     $[2] = t1;
   } else {
@@ -45,7 +45,7 @@ function Component(t0) {
 
 export const FIXTURE_ENTRYPOINT = {
   fn: Component,
-  params: [{ propA: { x: 2 }, propB: { x: { y: 3 } } }],
+  params: [{ propA: 2, propB: { x: { y: 3 } } }],
 };
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-alias-property-load-dep.ts

@@ -5,11 +5,11 @@ import {sum} from 'shared-runtime';
 function Component({propA, propB}) {
   const x = propB.x.y;
   return useCallback(() => {
-    return sum(propA.x, x);
-  }, [propA.x, x]);
+    return sum(propA, x);
+  }, [propA, x]);
 }
 
 export const FIXTURE_ENTRYPOINT = {
   fn: Component,
-  params: [{propA: {x: 2}, propB: {x: {y: 3}}}],
+  params: [{propA: 2, propB: {x: {y: 3}}}],
 };