[compiler] First cut at dep inference

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts

@@ -36,6 +36,7 @@ import {
   inferReactivePlaces,
   inferReferenceEffects,
   inlineImmediatelyInvokedFunctionExpressions,
+  inferEffectDependencies,
 } from '../Inference';
 import {
   constantPropagation,
@@ -353,6 +354,10 @@ function* runWithEnvironment(
     name: 'PropagateScopeDependenciesHIR',
     value: hir,
   });
+
+  if (env.config.inferEffectDependencies) {
+    inferEffectDependencies(env, hir);
+  }
 
   if (env.config.inlineJsxTransform) {
     inlineJsxTransform(hir, env.config.inlineJsxTransform);

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

@@ -233,6 +233,19 @@ const EnvironmentConfigSchema = z.object({
 
   enableFunctionDependencyRewrite: z.boolean().default(true),
 
+  /**
+   * Enables inference of optional dependency chains. Without this flag
+   * a property chain such as `props?.items?.foo` will infer as a dep on
+   * just `props`. With this flag enabled, we'll infer that full path as
+   * the dependency.
+   */
+  enableOptionalDependencies: z.boolean().default(true),
+
+  /**
+   * Enables inference and auto-insertion of effect dependencies. Still experimental.
+   */
+  inferEffectDependencies: z.boolean().default(false),
+
   /**
    * Enables inlining ReactElement object literals in place of JSX
    * An alternative to the standard JSX transform which replaces JSX with React's jsxProd() runtime

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

@@ -0,0 +1,79 @@
+import {
+  ArrayExpression,
+  Effect,
+  Environment,
+  FunctionExpression,
+  GeneratedSource,
+  HIRFunction,
+  IdentifierId,
+  Instruction,
+  isUseEffectHookType,
+  makeInstructionId,
+} from '../HIR';
+import {createTemporaryPlace} from '../HIR/HIRBuilder';
+
+/**
+ * Infers reactive dependencies captured by useEffect lambdas and adds them as
+ * a second argument to the useEffect call if no dependency array is provided.
+ */
+export function inferEffectDependencies(
+  env: Environment,
+  fn: HIRFunction,
+): void {
+  const fnExpressions = new Map<IdentifierId, FunctionExpression>();
+
+  for (const [, block] of fn.body.blocks) {
+    let rewriteInstrs = new Map();
+    for (const instr of block.instructions) {
+      const {value, lvalue} = instr;
+      if (value.kind === 'FunctionExpression') {
+        fnExpressions.set(lvalue.identifier.id, value);
+      } else if (
+        /*
+         * This check is not final. Right now we only look for useEffects without a dependency array.
+         * This is likely not how we will ship this feature, but it is good enough for us to make progress
+         * on the implementation and test it.
+         */
+        value.kind === 'CallExpression' &&
+        isUseEffectHookType(value.callee.identifier) &&
+        value.args.length === 1 &&
+        value.args[0].kind === 'Identifier'
+      ) {
+        const fnExpr = fnExpressions.get(value.args[0].identifier.id);
+        if (fnExpr != null) {
+          const deps: ArrayExpression = {
+            kind: 'ArrayExpression',
+            elements: fnExpr.loweredFunc.dependencies.filter(
+              place => place.reactive,
+            ),
+            loc: GeneratedSource,
+          };
+
+          const depsPlace = createTemporaryPlace(env, GeneratedSource);
+          depsPlace.effect = Effect.Read;
+          value.args[1] = depsPlace;
+
+          const newInstruction: Instruction = {
+            id: makeInstructionId(0),
+            loc: GeneratedSource,
+            lvalue: depsPlace,
+            value: deps,
+          };
+          rewriteInstrs.set(instr.id, newInstruction);
+        }
+      }
+    }
+    if (rewriteInstrs.size > 0) {
+      const newInstrs = [];
+      for (const instr of block.instructions) {
+        const newInstr = rewriteInstrs.get(instr.id);
+        if (newInstr != null) {
+          newInstrs.push(newInstr, instr);
+        } else {
+          newInstrs.push(instr);
+        }
+      }
+      block.instructions = newInstrs;
+    }
+  }
+}

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

@@ -11,3 +11,4 @@ export {inferMutableRanges} from './InferMutableRanges';
 export {inferReactivePlaces} from './InferReactivePlaces';
 export {default as inferReferenceEffects} from './InferReferenceEffects';
 export {inlineImmediatelyInvokedFunctionExpressions} from './InlineImmediatelyInvokedFunctionExpressions';
+export {inferEffectDependencies} from './InferEffectDependencies';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies.expect.md

@@ -0,0 +1,123 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+const moduleNonReactive = 0;
+
+function Component({foo, bar}) {
+  const localNonreactive = 0;
+  const ref = useRef(0);
+  const localNonPrimitiveReactive = {
+    foo,
+  };
+  const localNonPrimitiveNonreactive = {};
+  useEffect(() => {
+    console.log(foo);
+    console.log(bar);
+    console.log(moduleNonReactive);
+    console.log(localNonreactive);
+    console.log(globalValue);
+    console.log(ref.current);
+    console.log(localNonPrimitiveReactive);
+    console.log(localNonPrimitiveNonreactive);
+  });
+
+  // Optional chains and property accesses
+  // TODO: we may be able to save bytes by omitting property accesses if the
+  // object of the member expression is already included in the inferred deps
+  useEffect(() => {
+    console.log(bar?.baz);
+    console.log(bar.qux);
+  });
+
+  function f() {
+    console.log(foo);
+  }
+
+  // No inferred dep array, the argument is not a lambda
+  useEffect(f);
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
+const moduleNonReactive = 0;
+
+function Component(t0) {
+  const $ = _c(12);
+  const { foo, bar } = t0;
+
+  const ref = useRef(0);
+  let t1;
+  if ($[0] !== foo) {
+    t1 = { foo };
+    $[0] = foo;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const localNonPrimitiveReactive = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {};
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const localNonPrimitiveNonreactive = t2;
+  let t3;
+  if ($[3] !== bar || $[4] !== foo || $[5] !== localNonPrimitiveReactive) {
+    t3 = () => {
+      console.log(foo);
+      console.log(bar);
+      console.log(moduleNonReactive);
+      console.log(0);
+      console.log(globalValue);
+      console.log(ref.current);
+      console.log(localNonPrimitiveReactive);
+      console.log(localNonPrimitiveNonreactive);
+    };
+    $[3] = bar;
+    $[4] = foo;
+    $[5] = localNonPrimitiveReactive;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  useEffect(t3, [foo, bar, localNonPrimitiveReactive]);
+  let t4;
+  if ($[7] !== bar.baz || $[8] !== bar.qux) {
+    t4 = () => {
+      console.log(bar?.baz);
+      console.log(bar.qux);
+    };
+    $[7] = bar.baz;
+    $[8] = bar.qux;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  useEffect(t4, [bar, bar.qux]);
+  let t5;
+  if ($[10] !== foo) {
+    t5 = function f() {
+      console.log(foo);
+    };
+    $[10] = foo;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const f = t5;
+
+  useEffect(f);
+}
+
+```
+
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies.js

@@ -0,0 +1,36 @@
+// @inferEffectDependencies
+const moduleNonReactive = 0;
+
+function Component({foo, bar}) {
+  const localNonreactive = 0;
+  const ref = useRef(0);
+  const localNonPrimitiveReactive = {
+    foo,
+  };
+  const localNonPrimitiveNonreactive = {};
+  useEffect(() => {
+    console.log(foo);
+    console.log(bar);
+    console.log(moduleNonReactive);
+    console.log(localNonreactive);
+    console.log(globalValue);
+    console.log(ref.current);
+    console.log(localNonPrimitiveReactive);
+    console.log(localNonPrimitiveNonreactive);
+  });
+
+  // Optional chains and property accesses
+  // TODO: we may be able to save bytes by omitting property accesses if the
+  // object of the member expression is already included in the inferred deps
+  useEffect(() => {
+    console.log(bar?.baz);
+    console.log(bar.qux);
+  });
+
+  function f() {
+    console.log(foo);
+  }
+
+  // No inferred dep array, the argument is not a lambda
+  useEffect(f);
+}

compiler/packages/snap/src/compiler.ts

@@ -174,6 +174,11 @@ function makePluginOptions(
       .filter(s => s.length > 0);
   }
 
+  let inferEffectDependencies = false;
+  if (firstLine.includes('@inferEffectDependencies')) {
+    inferEffectDependencies = true;
+  }
+
   let logs: Array<{filename: string | null; event: LoggerEvent}> = [];
   let logger: Logger | null = null;
   if (firstLine.includes('@logger')) {
@@ -197,6 +202,7 @@ function makePluginOptions(
       hookPattern,
       validatePreserveExistingMemoizationGuarantees,
       validateBlocklistedImports,
+      inferEffectDependencies,
     },
     compilationMode,
     logger,