[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,
@@ -357,6 +358,10 @@ function* runWithEnvironment(
     });
   }
 
+  if (env.config.inferEffectDependencies) {
+    inferEffectDependencies(env, hir);
+  }
+
   if (env.config.inlineJsxTransform) {
     inlineJsxTransform(hir, env.config.inlineJsxTransform);
     yield log({

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

@@ -240,6 +240,11 @@ const EnvironmentConfigSchema = z.object({
    */
   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,91 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies
+const moduleNonReactive = 0;
+
+function Component({foo, bar}) {
+  const localNonreactive = 0;
+  useEffect(() => {
+    console.log(foo);
+    console.log(bar);
+    console.log(moduleNonReactive);
+    console.log(localNonreactive);
+    console.log(globalValue);
+  });
+
+  // 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(7);
+  const { foo, bar } = t0;
+  let t1;
+  if ($[0] !== foo || $[1] !== bar) {
+    t1 = () => {
+      console.log(foo);
+      console.log(bar);
+      console.log(moduleNonReactive);
+      console.log(0);
+      console.log(globalValue);
+    };
+    $[0] = foo;
+    $[1] = bar;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  useEffect(t1, [foo, bar]);
+  let t2;
+  if ($[3] !== bar) {
+    t2 = () => {
+      console.log(bar?.baz);
+      console.log(bar.qux);
+    };
+    $[3] = bar;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  useEffect(t2, [bar, bar.qux]);
+  let t3;
+  if ($[5] !== foo) {
+    t3 = function f() {
+      console.log(foo);
+    };
+    $[5] = foo;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const f = t3;
+
+  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,28 @@
+// @inferEffectDependencies
+const moduleNonReactive = 0;
+
+function Component({foo, bar}) {
+  const localNonreactive = 0;
+  useEffect(() => {
+    console.log(foo);
+    console.log(bar);
+    console.log(moduleNonReactive);
+    console.log(localNonreactive);
+    console.log(globalValue);
+  });
+
+  // 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

@@ -142,6 +142,7 @@ function makePluginOptions(
       importSpecifierName: '$structuralCheck',
     };
   }
+
   const hookPatternMatch = /@hookPattern:"([^"]+)"/.exec(firstLine);
   if (
     hookPatternMatch &&
@@ -210,6 +211,11 @@ function makePluginOptions(
     inlineJsxTransform = {elementSymbol: 'react.transitional.element'};
   }
 
+  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')) {
@@ -240,6 +246,7 @@ function makePluginOptions(
       lowerContextAccess,
       validateBlocklistedImports,
       inlineJsxTransform,
+      inferEffectDependencies,
     },
     compilationMode,
     logger,