[compiler][poc] Quick experiment with SSR-optimization pass

Just a quick poc:
* Inline useState when the initializer is known to not be a function. The heuristic could be improved but will handle a large number of cases already.
* Prune effects
* Prune useRef if the ref is unused, by pruning 'ref' props on primitive components. Then DCE does the rest of the work - with a small change to allow `useRef()` calls to be dropped since function calls aren't normally eligible for dropping.
* Prune event handlers, by pruning props whose names start w "on" from primitive components. Then DCE removes the functions themselves.

Per the fixture, this gets pretty far.

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

@@ -105,6 +105,7 @@ import {inferMutationAliasingRanges} from '../Inference/InferMutationAliasingRan
 import {validateNoDerivedComputationsInEffects} from '../Validation/ValidateNoDerivedComputationsInEffects';
 import {validateNoDerivedComputationsInEffects_exp} from '../Validation/ValidateNoDerivedComputationsInEffects_exp';
 import {nameAnonymousFunctions} from '../Transform/NameAnonymousFunctions';
+import {optimizeForSSR} from '../Optimization/OptimizeForSSR';
 import {validateSourceLocations} from '../Validation/ValidateSourceLocations';
 
 export type CompilerPipelineValue =
@@ -237,6 +238,11 @@ function runWithEnvironment(
     }
   }
 
+  if (env.config.enableOptimizeForSSR) {
+    optimizeForSSR(hir);
+    log({kind: 'hir', name: 'OptimizeForSSR', value: hir});
+  }
+
   // Note: Has to come after infer reference effects because "dead" code may still affect inference
   deadCodeElimination(hir);
   log({kind: 'hir', name: 'DeadCodeElimination', value: hir});
@@ -314,8 +320,10 @@ function runWithEnvironment(
      * if inferred memoization is enabled. This makes all later passes which
      * transform reactive-scope labeled instructions no-ops.
      */
-    inferReactiveScopeVariables(hir);
-    log({kind: 'hir', name: 'InferReactiveScopeVariables', value: hir});
+    if (!env.config.enableOptimizeForSSR) {
+      inferReactiveScopeVariables(hir);
+      log({kind: 'hir', name: 'InferReactiveScopeVariables', value: hir});
+    }
   }
 
   const fbtOperands = memoizeFbtAndMacroOperandsInSameScope(hir);

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

@@ -691,6 +691,8 @@ export const EnvironmentConfigSchema = z.object({
    * by React to only execute in response to events, not during render.
    */
   enableInferEventHandlers: z.boolean().default(false),
+
+  enableOptimizeForSSR: z.boolean().default(false),
 });
 
 export type EnvironmentConfig = z.infer<typeof EnvironmentConfigSchema>;

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

@@ -1823,6 +1823,10 @@ export function isPrimitiveType(id: Identifier): boolean {
   return id.type.kind === 'Primitive';
 }
 
+export function isPlainObjectType(id: Identifier): boolean {
+  return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInObject';
+}
+
 export function isArrayType(id: Identifier): boolean {
   return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInArray';
 }

compiler/packages/babel-plugin-react-compiler/src/Optimization/DeadCodeElimination.ts

@@ -7,6 +7,8 @@
 
 import {
   BlockId,
+  Environment,
+  getHookKind,
   HIRFunction,
   Identifier,
   IdentifierId,
@@ -68,9 +70,14 @@ export function deadCodeElimination(fn: HIRFunction): void {
 }
 
 class State {
+  env: Environment;
   named: Set<string> = new Set();
   identifiers: Set<IdentifierId> = new Set();
 
+  constructor(env: Environment) {
+    this.env = env;
+  }
+
   // Mark the identifier as being referenced (not dead code)
   reference(identifier: Identifier): void {
     this.identifiers.add(identifier.id);
@@ -112,7 +119,7 @@ function findReferencedIdentifiers(fn: HIRFunction): State {
   const hasLoop = hasBackEdge(fn);
   const reversedBlocks = [...fn.body.blocks.values()].reverse();
 
-  const state = new State();
+  const state = new State(fn.env);
   let size = state.count;
   do {
     size = state.count;
@@ -310,12 +317,27 @@ function pruneableValue(value: InstructionValue, state: State): boolean {
       // explicitly retain debugger statements to not break debugging workflows
       return false;
     }
-    case 'Await':
     case 'CallExpression':
+    case 'MethodCall': {
+      if (state.env.config.enableOptimizeForSSR) {
+        const calleee =
+          value.kind === 'CallExpression' ? value.callee : value.property;
+        const hookKind = getHookKind(state.env, calleee.identifier);
+        switch (hookKind) {
+          case 'useState':
+          case 'useReducer':
+          case 'useRef': {
+            // unused refs can be removed
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+    case 'Await':
     case 'ComputedDelete':
     case 'ComputedStore':
     case 'PropertyDelete':
-    case 'MethodCall':
     case 'PropertyStore':
     case 'StoreGlobal': {
       /*

compiler/packages/babel-plugin-react-compiler/src/Optimization/OptimizeForSSR.ts

@@ -0,0 +1,269 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerError} from '..';
+import {
+  CallExpression,
+  getHookKind,
+  HIRFunction,
+  IdentifierId,
+  InstructionValue,
+  isArrayType,
+  isPlainObjectType,
+  isPrimitiveType,
+  isSetStateType,
+  isStartTransitionType,
+  LoadLocal,
+  StoreLocal,
+} from '../HIR';
+import {
+  eachInstructionValueOperand,
+  eachTerminalOperand,
+} from '../HIR/visitors';
+import {retainWhere} from '../Utils/utils';
+
+/**
+ * Optimizes the code for running specifically in an SSR environment. This optimization
+ * asssumes that setState will not be called during render during initial mount, which
+ * allows inlining useState/useReducer.
+ *
+ * Optimizations:
+ * - Inline useState/useReducer
+ * - Remove effects
+ * - Remove refs where known to be unused during render (eg directly passed to a dom node)
+ * - Remove event handlers
+ *
+ * Note that an earlier pass already inlines useMemo/useCallback
+ */
+export function optimizeForSSR(fn: HIRFunction): void {
+  const inlinedState = new Map<IdentifierId, InstructionValue>();
+  /**
+   * First pass identifies useState/useReducer which can be safely inlined. Any use
+   * of the hook return other than destructuring (with a specific pattern) prevents
+   * inlining.
+   *
+   * Supported cases:
+   * - `const [state, ] = useState( <primitive-array-or-object> )`
+   * - `const [state, ] = useReducer(..., <value>)`
+   * - `const [state, ] = useReducer[..., <value>, <init>]`
+   */
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      const {value} = instr;
+      switch (value.kind) {
+        case 'Destructure': {
+          if (
+            inlinedState.has(value.value.identifier.id) &&
+            value.lvalue.pattern.kind === 'ArrayPattern' &&
+            value.lvalue.pattern.items.length >= 1 &&
+            value.lvalue.pattern.items[0].kind === 'Identifier'
+          ) {
+            // Allow destructuring of inlined states
+            continue;
+          }
+          break;
+        }
+        case 'MethodCall':
+        case 'CallExpression': {
+          const calleee =
+            value.kind === 'CallExpression' ? value.callee : value.property;
+          const hookKind = getHookKind(fn.env, calleee.identifier);
+          switch (hookKind) {
+            case 'useReducer': {
+              if (
+                value.args.length === 2 &&
+                value.args[1].kind === 'Identifier'
+              ) {
+                const arg = value.args[1];
+                const replace: LoadLocal = {
+                  kind: 'LoadLocal',
+                  place: arg,
+                  loc: arg.loc,
+                };
+                inlinedState.set(instr.lvalue.identifier.id, replace);
+              } else if (
+                value.args.length === 3 &&
+                value.args[1].kind === 'Identifier' &&
+                value.args[2].kind === 'Identifier'
+              ) {
+                const arg = value.args[1];
+                const initializer = value.args[2];
+                const replace: CallExpression = {
+                  kind: 'CallExpression',
+                  callee: initializer,
+                  args: [arg],
+                  loc: value.loc,
+                };
+                inlinedState.set(instr.lvalue.identifier.id, replace);
+              }
+              break;
+            }
+            case 'useState': {
+              if (
+                value.args.length === 1 &&
+                value.args[0].kind === 'Identifier'
+              ) {
+                const arg = value.args[0];
+                if (
+                  isPrimitiveType(arg.identifier) ||
+                  isPlainObjectType(arg.identifier) ||
+                  isArrayType(arg.identifier)
+                ) {
+                  const replace: LoadLocal = {
+                    kind: 'LoadLocal',
+                    place: arg,
+                    loc: arg.loc,
+                  };
+                  inlinedState.set(instr.lvalue.identifier.id, replace);
+                }
+              }
+              break;
+            }
+          }
+        }
+      }
+      // Any use of useState/useReducer return besides destructuring prevents inlining
+      if (inlinedState.size !== 0) {
+        for (const operand of eachInstructionValueOperand(value)) {
+          inlinedState.delete(operand.identifier.id);
+        }
+      }
+    }
+    if (inlinedState.size !== 0) {
+      for (const operand of eachTerminalOperand(block.terminal)) {
+        inlinedState.delete(operand.identifier.id);
+      }
+    }
+  }
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      const {value} = instr;
+      switch (value.kind) {
+        case 'FunctionExpression': {
+          if (hasKnownNonRenderCall(value.loweredFunc.func)) {
+            instr.value = {
+              kind: 'Primitive',
+              value: undefined,
+              loc: value.loc,
+            };
+          }
+          break;
+        }
+        case 'JsxExpression': {
+          if (
+            value.tag.kind === 'BuiltinTag' &&
+            value.tag.name.indexOf('-') === -1
+          ) {
+            const tag = value.tag.name;
+            retainWhere(value.props, prop => {
+              return (
+                prop.kind === 'JsxSpreadAttribute' ||
+                (!isKnownEventHandler(tag, prop.name) && prop.name !== 'ref')
+              );
+            });
+          }
+          break;
+        }
+        case 'Destructure': {
+          if (inlinedState.has(value.value.identifier.id)) {
+            // Canonical check is part of determining if state can inline, this is for TS
+            CompilerError.invariant(
+              value.lvalue.pattern.kind === 'ArrayPattern' &&
+                value.lvalue.pattern.items.length >= 1 &&
+                value.lvalue.pattern.items[0].kind === 'Identifier',
+              {
+                reason:
+                  'Expected a valid destructuring pattern for inlined state',
+                description: null,
+                details: [
+                  {
+                    kind: 'error',
+                    message: 'Expected a valid destructuring pattern',
+                    loc: value.loc,
+                  },
+                ],
+              },
+            );
+            const store: StoreLocal = {
+              kind: 'StoreLocal',
+              loc: value.loc,
+              type: null,
+              lvalue: {
+                kind: value.lvalue.kind,
+                place: value.lvalue.pattern.items[0],
+              },
+              value: value.value,
+            };
+            instr.value = store;
+          }
+          break;
+        }
+        case 'MethodCall':
+        case 'CallExpression': {
+          const calleee =
+            value.kind === 'CallExpression' ? value.callee : value.property;
+          const hookKind = getHookKind(fn.env, calleee.identifier);
+          switch (hookKind) {
+            case 'useEffectEvent': {
+              if (
+                value.args.length === 1 &&
+                value.args[0].kind === 'Identifier'
+              ) {
+                const load: LoadLocal = {
+                  kind: 'LoadLocal',
+                  place: value.args[0],
+                  loc: value.loc,
+                };
+                instr.value = load;
+              }
+              break;
+            }
+            case 'useEffect':
+            case 'useLayoutEffect':
+            case 'useInsertionEffect': {
+              // Drop effects
+              instr.value = {
+                kind: 'Primitive',
+                value: undefined,
+                loc: value.loc,
+              };
+              break;
+            }
+            case 'useReducer':
+            case 'useState': {
+              const replace = inlinedState.get(instr.lvalue.identifier.id);
+              if (replace != null) {
+                instr.value = replace;
+              }
+              break;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+function hasKnownNonRenderCall(fn: HIRFunction): boolean {
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      if (
+        instr.value.kind === 'CallExpression' &&
+        (isSetStateType(instr.value.callee.identifier) ||
+          isStartTransitionType(instr.value.callee.identifier))
+      ) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+const EVENT_HANDLER_PATTERN = /^on[A-Z]/;
+function isKnownEventHandler(_tag: string, prop: string): boolean {
+  return EVENT_HANDLER_PATTERN.test(prop);
+}

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

@@ -52,6 +52,8 @@ type ValidationContext = {
   readonly setStateUsages: Map<IdentifierId, Set<SourceLocation>>;
 };
 
+const MAX_FIXPOINT_ITERATIONS = 100;
+
 class DerivationCache {
   hasChanges: boolean = false;
   cache: Map<IdentifierId, DerivationMetadata> = new Map();
@@ -224,6 +226,7 @@ export function validateNoDerivedComputationsInEffects_exp(
   }
 
   let isFirstPass = true;
+  let iterationCount = 0;
   do {
     context.derivationCache.takeSnapshot();
 
@@ -236,6 +239,19 @@ export function validateNoDerivedComputationsInEffects_exp(
 
     context.derivationCache.checkForChanges();
     isFirstPass = false;
+    iterationCount++;
+    CompilerError.invariant(iterationCount < MAX_FIXPOINT_ITERATIONS, {
+      reason:
+        '[ValidateNoDerivedComputationsInEffects] Fixpoint iteration failed to converge.',
+      description: `Fixpoint iteration exceeded ${MAX_FIXPOINT_ITERATIONS} iterations while tracking derivations. This suggests a cyclic dependency in the derivation cache.`,
+      details: [
+        {
+          kind: 'error',
+          loc: fn.loc,
+          message: `Exceeded ${MAX_FIXPOINT_ITERATIONS} iterations in ValidateNoDerivedComputationsInEffects`,
+        },
+      ],
+    });
   } while (context.derivationCache.snapshot());
 
   for (const [, effect] of effectsCache) {
@@ -372,7 +388,7 @@ function recordInstructionDerivations(
           dependencies: deps,
         });
       }
-    } else if (isUseStateType(lvalue.identifier) && value.args.length > 0) {
+    } else if (isUseStateType(lvalue.identifier)) {
       typeOfValue = 'fromState';
       context.derivationCache.addDerivationEntry(
         lvalue,
@@ -422,6 +438,14 @@ function recordInstructionDerivations(
     );
   }
 
+  if (value.kind === 'FunctionExpression') {
+    /*
+     * We don't want to record effect mutations of FunctionExpressions the mutations will happen in the
+     * function body and we will record them there.
+     */
+    return;
+  }
+
   for (const operand of eachInstructionOperand(instr)) {
     switch (operand.effect) {
       case Effect.Capture:
@@ -512,6 +536,19 @@ function buildTreeNode(
 
   const namedSiblings: Set<string> = new Set();
   for (const childId of sourceMetadata.sourcesIds) {
+    CompilerError.invariant(childId !== sourceId, {
+      reason:
+        'Unexpected self-reference: a value should not have itself as a source',
+      description: null,
+      details: [
+        {
+          kind: 'error',
+          loc: sourceMetadata.place.loc,
+          message: null,
+        },
+      ],
+    });
+
     const childNodes = buildTreeNode(
       childId,
       context,

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.expect.md

@@ -0,0 +1,115 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+
+function Component() {
+  const [foo, setFoo] = useState({});
+  const [bar, setBar] = useState(new Set());
+
+  /*
+   * isChanged is considered context of the effect's function expression,
+   * if we don't bail out of effect mutation derivation tracking, isChanged
+   * will inherit the sources of the effect's function expression.
+   *
+   * This is innacurate and with the multiple passes ends up causing an infinite loop.
+   */
+  useEffect(() => {
+    let isChanged = false;
+
+    const newData = foo.map(val => {
+      bar.someMethod(val);
+      isChanged = true;
+    });
+
+    if (isChanged) {
+      setFoo(newData);
+    }
+  }, [foo, bar]);
+
+  return (
+    <div>
+      {foo}, {bar}
+    </div>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+
+function Component() {
+  const $ = _c(9);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const [foo, setFoo] = useState(t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = new Set();
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [bar] = useState(t1);
+  let t2;
+  let t3;
+  if ($[2] !== bar || $[3] !== foo) {
+    t2 = () => {
+      let isChanged = false;
+
+      const newData = foo.map((val) => {
+        bar.someMethod(val);
+        isChanged = true;
+      });
+
+      if (isChanged) {
+        setFoo(newData);
+      }
+    };
+
+    t3 = [foo, bar];
+    $[2] = bar;
+    $[3] = foo;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t2 = $[4];
+    t3 = $[5];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[6] !== bar || $[7] !== foo) {
+    t4 = (
+      <div>
+        {foo}, {bar}
+      </div>
+    );
+    $[6] = bar;
+    $[7] = foo;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [foo, bar]\n\nData Flow Tree:\n└── newData\n    ├── foo (State)\n    └── bar (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":23,"column":6,"index":663},"end":{"line":23,"column":12,"index":669},"filename":"function-expression-mutation-edge-case.ts","identifierName":"setFoo"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":64},"end":{"line":32,"column":1,"index":762},"filename":"function-expression-mutation-edge-case.ts"},"fnName":"Component","memoSlots":9,"memoBlocks":4,"memoValues":5,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.js

@@ -0,0 +1,32 @@
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+
+function Component() {
+  const [foo, setFoo] = useState({});
+  const [bar, setBar] = useState(new Set());
+
+  /*
+   * isChanged is considered context of the effect's function expression,
+   * if we don't bail out of effect mutation derivation tracking, isChanged
+   * will inherit the sources of the effect's function expression.
+   *
+   * This is innacurate and with the multiple passes ends up causing an infinite loop.
+   */
+  useEffect(() => {
+    let isChanged = false;
+
+    const newData = foo.map(val => {
+      bar.someMethod(val);
+      isChanged = true;
+    });
+
+    if (isChanged) {
+      setFoo(newData);
+    }
+  }, [foo, bar]);
+
+  return (
+    <div>
+      {foo}, {bar}
+    </div>
+  );
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.expect.md

@@ -64,6 +64,7 @@ function Component(t0) {
 ## Logs
 
 ```
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [second]\n\nData Flow Tree:\n└── second (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":14,"column":4,"index":443},"end":{"line":14,"column":8,"index":447},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts","identifierName":"setS"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":64},"end":{"line":18,"column":1,"index":500},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/optimize-ssr.expect.md

@@ -0,0 +1,30 @@
+
+## Input
+
+```javascript
+// @enableOptimizeForSSR
+function Component() {
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = e => {
+    setState(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+// @enableOptimizeForSSR
+function Component() {
+  const state = 0;
+  return <input value={state} />;
+}
+
+```
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/optimize-ssr.js

@@ -0,0 +1,12 @@
+// @enableOptimizeForSSR
+function Component() {
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = e => {
+    setState(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-setState.expect.md

@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+// @enableOptimizeForSSR
+function Component() {
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = e => {
+    // The known setState call allows us to infer this as an event handler
+    // and prune it
+    setState(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <CustomInput value={state} onChange={onChange} ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+// @enableOptimizeForSSR
+function Component() {
+  const state = 0;
+  const ref = useRef(null);
+  const onChange = undefined;
+  return <CustomInput value={state} onChange={onChange} ref={ref} />;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-setState.js

@@ -0,0 +1,14 @@
+// @enableOptimizeForSSR
+function Component() {
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = e => {
+    // The known setState call allows us to infer this as an event handler
+    // and prune it
+    setState(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <CustomInput value={state} onChange={onChange} ref={ref} />;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-startTransition.expect.md

@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+// @enableOptimizeForSSR
+function Component() {
+  const [, startTransition] = useTransition();
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = e => {
+    // The known startTransition call allows us to infer this as an event handler
+    // and prune it
+    startTransition(() => {
+      setState.call(null, e.target.value);
+    });
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <CustomInput value={state} onChange={onChange} ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+// @enableOptimizeForSSR
+function Component() {
+  useTransition();
+  const state = 0;
+  const ref = useRef(null);
+  const onChange = undefined;
+  return <CustomInput value={state} onChange={onChange} ref={ref} />;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-startTransition.js

@@ -0,0 +1,17 @@
+// @enableOptimizeForSSR
+function Component() {
+  const [, startTransition] = useTransition();
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = e => {
+    // The known startTransition call allows us to infer this as an event handler
+    // and prune it
+    startTransition(() => {
+      setState.call(null, e.target.value);
+    });
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <CustomInput value={state} onChange={onChange} ref={ref} />;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer-initializer.expect.md

@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @enableOptimizeForSSR
+
+import {useReducer} from 'react';
+
+const initializer = x => x;
+
+function Component() {
+  const [state, dispatch] = useReducer((_, next) => next, 0, initializer);
+  const ref = useRef(null);
+  const onChange = e => {
+    dispatch(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+// @enableOptimizeForSSR
+
+import { useReducer } from "react";
+
+const initializer = (x) => {
+  return x;
+};
+
+function Component() {
+  const state = initializer(0);
+  return <input value={state} />;
+}
+
+```
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer-initializer.js

@@ -0,0 +1,17 @@
+// @enableOptimizeForSSR
+
+import {useReducer} from 'react';
+
+const initializer = x => x;
+
+function Component() {
+  const [state, dispatch] = useReducer((_, next) => next, 0, initializer);
+  const ref = useRef(null);
+  const onChange = e => {
+    dispatch(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer.expect.md

@@ -0,0 +1,36 @@
+
+## Input
+
+```javascript
+// @enableOptimizeForSSR
+
+import {useReducer} from 'react';
+
+function Component() {
+  const [state, dispatch] = useReducer((_, next) => next, 0);
+  const ref = useRef(null);
+  const onChange = e => {
+    dispatch(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+// @enableOptimizeForSSR
+
+import { useReducer } from "react";
+
+function Component() {
+  const state = 0;
+  return <input value={state} />;
+}
+
+```
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer.js

@@ -0,0 +1,15 @@
+// @enableOptimizeForSSR
+
+import {useReducer} from 'react';
+
+function Component() {
+  const [state, dispatch] = useReducer((_, next) => next, 0);
+  const ref = useRef(null);
+  const onChange = e => {
+    dispatch(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}

compiler/packages/snap/src/SproutTodoFilter.ts

@@ -487,6 +487,13 @@ const skipFilter = new Set([
   'lower-context-selector-simple',
   'lower-context-acess-multiple',
   'bug-separate-memoization-due-to-callback-capturing',
+
+  // SSR optimization rewrites files in a way that causes differences or warnings
+  'ssr/optimize-ssr',
+  'ssr/ssr-use-reducer',
+  'ssr/ssr-use-reducer-initializer',
+  'ssr/infer-event-handlers-from-setState',
+  'ssr/infer-event-handlers-from-startTransition',
 ]);
 
 export default skipFilter;