Merge branch 'main' into pr34995

Summary:
Revamped the derivationCache graph.

This fixes a bunch of bugs where sometimes we fail to track from which props/state we derived values from.

Also, it is more intuitive and allows us to easily implement a Data Flow Tree.

We can print this tree which gives insight on how the data is derived and should facilitate error resolution in complicated components

Test Plan:
Added a test case where we were failing to track derivations. Also updated the test cases with the new error containing the data flow tree

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

@@ -105,7 +105,6 @@ import {inferMutationAliasingRanges} from '../Inference/InferMutationAliasingRan
 import {validateNoDerivedComputationsInEffects} from '../Validation/ValidateNoDerivedComputationsInEffects';
 import {validateNoDerivedComputationsInEffects_exp} from '../Validation/ValidateNoDerivedComputationsInEffects_exp';
 import {nameAnonymousFunctions} from '../Transform/NameAnonymousFunctions';
-import {validateSourceLocations} from '../Validation/ValidateSourceLocations';
 
 export type CompilerPipelineValue =
   | {kind: 'ast'; name: string; value: CodegenFunction}
@@ -273,12 +272,14 @@ function runWithEnvironment(
       validateNoSetStateInRender(hir).unwrap();
     }
 
-    if (env.config.validateNoDerivedComputationsInEffects_exp) {
-      env.logErrors(validateNoDerivedComputationsInEffects_exp(hir));
-    } else if (env.config.validateNoDerivedComputationsInEffects) {
+    if (env.config.validateNoDerivedComputationsInEffects) {
       validateNoDerivedComputationsInEffects(hir);
     }
 
+    if (env.config.validateNoDerivedComputationsInEffects_exp) {
+      validateNoDerivedComputationsInEffects_exp(hir);
+    }
+
     if (env.config.validateNoSetStateInEffects) {
       env.logErrors(validateNoSetStateInEffects(hir, env));
     }
@@ -558,10 +559,6 @@ function runWithEnvironment(
     log({kind: 'ast', name: 'Codegen (outlined)', value: outlined.fn});
   }
 
-  if (env.config.validateSourceLocations) {
-    validateSourceLocations(func, ast).unwrap();
-  }
-
   /**
    * This flag should be only set for unit / fixture tests to check
    * that Forget correctly handles unexpected errors (e.g. exceptions

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

@@ -364,13 +364,6 @@ export const EnvironmentConfigSchema = z.object({
   validateNoCapitalizedCalls: z.nullable(z.array(z.string())).default(null),
   validateBlocklistedImports: z.nullable(z.array(z.string())).default(null),
 
-  /**
-   * Validates that AST nodes generated during codegen have proper source locations.
-   * This is useful for debugging issues with source maps and Istanbul coverage.
-   * When enabled, the compiler will error if important source locations are missing in the generated AST.
-   */
-  validateSourceLocations: z.boolean().default(false),
-
   /**
    * Validate against impure functions called during render
    */
@@ -672,25 +665,11 @@ export const EnvironmentConfigSchema = z.object({
   validateNoDynamicallyCreatedComponentsOrHooks: z.boolean().default(false),
 
   /**
-   * When enabled, allows setState calls in effects based on valid patterns involving refs:
-   * - Allow setState where the value being set is derived from a ref. This is useful where
-   *   state needs to take into account layer information, and a layout effect reads layout
-   *   data from a ref and sets state.
-   * - Allow conditionally calling setState after manually comparing previous/new values
-   *   for changes via a ref. Relying on effect deps is insufficient for non-primitive values,
-   *   so a ref is generally required to manually track previous values and compare prev/next
-   *   for meaningful changes before setting state.
+   * When enabled, allows setState calls in effects when the value being set is
+   * derived from a ref. This is useful for patterns where initial layout measurements
+   * from refs need to be stored in state during mount.
    */
   enableAllowSetStateFromRefsInEffects: z.boolean().default(true),
-
-  /**
-   * Enables inference of event handler types for JSX props on built-in DOM elements.
-   * When enabled, functions passed to event handler props (props starting with "on")
-   * on primitive JSX tags are inferred to have the BuiltinEventHandlerId type, which
-   * allows ref access within those functions since DOM event handlers are guaranteed
-   * by React to only execute in response to events, not during render.
-   */
-  enableInferEventHandlers: z.boolean().default(false),
 });
 
 export type EnvironmentConfig = z.infer<typeof EnvironmentConfigSchema>;

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

@@ -23,14 +23,13 @@ import {
   BuiltInUseInsertionEffectHookId,
   BuiltInUseLayoutEffectHookId,
   BuiltInUseOperatorId,
-  BuiltInUseOptimisticId,
   BuiltInUseReducerId,
   BuiltInUseRefId,
   BuiltInUseStateId,
   BuiltInUseTransitionId,
   BuiltInWeakMapId,
   BuiltInWeakSetId,
-  BuiltInEffectEventId,
+  BuiltinEffectEventId,
   ReanimatedSharedValueId,
   ShapeRegistry,
   addFunction,
@@ -819,18 +818,6 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       returnValueKind: ValueKind.Frozen,
     }),
   ],
-  [
-    'useOptimistic',
-    addHook(DEFAULT_SHAPES, {
-      positionalParams: [],
-      restParam: Effect.Freeze,
-      returnType: {kind: 'Object', shapeId: BuiltInUseOptimisticId},
-      calleeEffect: Effect.Read,
-      hookKind: 'useOptimistic',
-      returnValueKind: ValueKind.Frozen,
-      returnValueReason: ValueReason.State,
-    }),
-  ],
   [
     'use',
     addFunction(
@@ -876,7 +863,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
         returnType: {
           kind: 'Function',
           return: {kind: 'Poly'},
-          shapeId: BuiltInEffectEventId,
+          shapeId: BuiltinEffectEventId,
           isConstructor: false,
         },
         calleeEffect: Effect.Read,

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

@@ -1887,18 +1887,6 @@ export function isStartTransitionType(id: Identifier): boolean {
   );
 }
 
-export function isUseOptimisticType(id: Identifier): boolean {
-  return (
-    id.type.kind === 'Object' && id.type.shapeId === 'BuiltInUseOptimistic'
-  );
-}
-
-export function isSetOptimisticType(id: Identifier): boolean {
-  return (
-    id.type.kind === 'Function' && id.type.shapeId === 'BuiltInSetOptimistic'
-  );
-}
-
 export function isSetActionStateType(id: Identifier): boolean {
   return (
     id.type.kind === 'Function' && id.type.shapeId === 'BuiltInSetActionState'
@@ -1932,8 +1920,7 @@ export function isStableType(id: Identifier): boolean {
     isSetActionStateType(id) ||
     isDispatcherType(id) ||
     isUseRefType(id) ||
-    isStartTransitionType(id) ||
-    isSetOptimisticType(id)
+    isStartTransitionType(id)
   );
 }
 
@@ -1944,9 +1931,8 @@ export function isStableTypeContainer(id: Identifier): boolean {
   }
   return (
     isUseStateType(id) || // setState
-    isUseActionStateType(id) || // setActionState
+    type_.shapeId === 'BuiltInUseActionState' || // setActionState
     isUseReducerType(id) || // dispatcher
-    isUseOptimisticType(id) || // setOptimistic
     type_.shapeId === 'BuiltInUseTransition' // startTransition
   );
 }
@@ -1966,7 +1952,6 @@ export function evaluatesToStableTypeOrContainer(
       case 'useActionState':
       case 'useRef':
       case 'useTransition':
-      case 'useOptimistic':
         return true;
     }
   }

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

@@ -304,7 +304,6 @@ export type HookKind =
   | 'useTransition'
   | 'useImperativeHandle'
   | 'useEffectEvent'
-  | 'useOptimistic'
   | 'Custom';
 
 /*
@@ -400,15 +399,12 @@ export const BuiltInUseReducerId = 'BuiltInUseReducer';
 export const BuiltInDispatchId = 'BuiltInDispatch';
 export const BuiltInUseContextHookId = 'BuiltInUseContextHook';
 export const BuiltInUseTransitionId = 'BuiltInUseTransition';
-export const BuiltInUseOptimisticId = 'BuiltInUseOptimistic';
-export const BuiltInSetOptimisticId = 'BuiltInSetOptimistic';
 export const BuiltInStartTransitionId = 'BuiltInStartTransition';
 export const BuiltInFireId = 'BuiltInFire';
 export const BuiltInFireFunctionId = 'BuiltInFireFunction';
 export const BuiltInUseEffectEventId = 'BuiltInUseEffectEvent';
-export const BuiltInEffectEventId = 'BuiltInEffectEventFunction';
+export const BuiltinEffectEventId = 'BuiltInEffectEventFunction';
 export const BuiltInAutodepsId = 'BuiltInAutoDepsId';
-export const BuiltInEventHandlerId = 'BuiltInEventHandlerId';
 
 // See getReanimatedModuleType() in Globals.ts — this is part of supporting Reanimated's ref-like types
 export const ReanimatedSharedValueId = 'ReanimatedSharedValueId';
@@ -1189,25 +1185,6 @@ addObject(BUILTIN_SHAPES, BuiltInUseTransitionId, [
   ],
 ]);
 
-addObject(BUILTIN_SHAPES, BuiltInUseOptimisticId, [
-  ['0', {kind: 'Poly'}],
-  [
-    '1',
-    addFunction(
-      BUILTIN_SHAPES,
-      [],
-      {
-        positionalParams: [],
-        restParam: Effect.Freeze,
-        returnType: PRIMITIVE_TYPE,
-        calleeEffect: Effect.Read,
-        returnValueKind: ValueKind.Primitive,
-      },
-      BuiltInSetOptimisticId,
-    ),
-  ],
-]);
-
 addObject(BUILTIN_SHAPES, BuiltInUseActionStateId, [
   ['0', {kind: 'Poly'}],
   [
@@ -1266,20 +1243,7 @@ addFunction(
     calleeEffect: Effect.ConditionallyMutate,
     returnValueKind: ValueKind.Mutable,
   },
-  BuiltInEffectEventId,
-);
-
-addFunction(
-  BUILTIN_SHAPES,
-  [],
-  {
-    positionalParams: [],
-    restParam: Effect.ConditionallyMutate,
-    returnType: {kind: 'Poly'},
-    calleeEffect: Effect.ConditionallyMutate,
-    returnValueKind: ValueKind.Mutable,
-  },
-  BuiltInEventHandlerId,
+  BuiltinEffectEventId,
 );
 
 /**

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

@@ -11,7 +11,6 @@ import {
   BasicBlock,
   BlockId,
   Instruction,
-  InstructionKind,
   InstructionValue,
   makeInstructionId,
   Pattern,
@@ -33,32 +32,6 @@ export function* eachInstructionLValue(
   yield* eachInstructionValueLValue(instr.value);
 }
 
-export function* eachInstructionLValueWithKind(
-  instr: ReactiveInstruction,
-): Iterable<[Place, InstructionKind]> {
-  switch (instr.value.kind) {
-    case 'DeclareContext':
-    case 'StoreContext':
-    case 'DeclareLocal':
-    case 'StoreLocal': {
-      yield [instr.value.lvalue.place, instr.value.lvalue.kind];
-      break;
-    }
-    case 'Destructure': {
-      const kind = instr.value.lvalue.kind;
-      for (const place of eachPatternOperand(instr.value.lvalue.pattern)) {
-        yield [place, kind];
-      }
-      break;
-    }
-    case 'PostfixUpdate':
-    case 'PrefixUpdate': {
-      yield [instr.value.lvalue, InstructionKind.Reassign];
-      break;
-    }
-  }
-}
-
 export function* eachInstructionValueLValue(
   value: ReactiveValue,
 ): Iterable<Place> {

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

@@ -1,114 +0,0 @@
-/**
- * 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 {BlockId, computePostDominatorTree, HIRFunction, Place} from '../HIR';
-import {PostDominator} from '../HIR/Dominator';
-
-export type ControlDominators = (id: BlockId) => boolean;
-
-/**
- * Returns an object that lazily calculates whether particular blocks are controlled
- * by values of interest. Which values matter are up to the caller.
- */
-export function createControlDominators(
-  fn: HIRFunction,
-  isControlVariable: (place: Place) => boolean,
-): ControlDominators {
-  const postDominators = computePostDominatorTree(fn, {
-    includeThrowsAsExitNode: false,
-  });
-  const postDominatorFrontierCache = new Map<BlockId, Set<BlockId>>();
-
-  function isControlledBlock(id: BlockId): boolean {
-    let controlBlocks = postDominatorFrontierCache.get(id);
-    if (controlBlocks === undefined) {
-      controlBlocks = postDominatorFrontier(fn, postDominators, id);
-      postDominatorFrontierCache.set(id, controlBlocks);
-    }
-    for (const blockId of controlBlocks) {
-      const controlBlock = fn.body.blocks.get(blockId)!;
-      switch (controlBlock.terminal.kind) {
-        case 'if':
-        case 'branch': {
-          if (isControlVariable(controlBlock.terminal.test)) {
-            return true;
-          }
-          break;
-        }
-        case 'switch': {
-          if (isControlVariable(controlBlock.terminal.test)) {
-            return true;
-          }
-          for (const case_ of controlBlock.terminal.cases) {
-            if (case_.test !== null && isControlVariable(case_.test)) {
-              return true;
-            }
-          }
-          break;
-        }
-      }
-    }
-    return false;
-  }
-
-  return isControlledBlock;
-}
-
-/*
- * Computes the post-dominator frontier of @param block. These are immediate successors of nodes that
- * post-dominate @param targetId and from which execution may not reach @param block. Intuitively, these
- * are the earliest blocks from which execution branches such that it may or may not reach the target block.
- */
-function postDominatorFrontier(
-  fn: HIRFunction,
-  postDominators: PostDominator<BlockId>,
-  targetId: BlockId,
-): Set<BlockId> {
-  const visited = new Set<BlockId>();
-  const frontier = new Set<BlockId>();
-  const targetPostDominators = postDominatorsOf(fn, postDominators, targetId);
-  for (const blockId of [...targetPostDominators, targetId]) {
-    if (visited.has(blockId)) {
-      continue;
-    }
-    visited.add(blockId);
-    const block = fn.body.blocks.get(blockId)!;
-    for (const pred of block.preds) {
-      if (!targetPostDominators.has(pred)) {
-        // The predecessor does not always reach this block, we found an item on the frontier!
-        frontier.add(pred);
-      }
-    }
-  }
-  return frontier;
-}
-
-function postDominatorsOf(
-  fn: HIRFunction,
-  postDominators: PostDominator<BlockId>,
-  targetId: BlockId,
-): Set<BlockId> {
-  const result = new Set<BlockId>();
-  const visited = new Set<BlockId>();
-  const queue = [targetId];
-  while (queue.length) {
-    const currentId = queue.shift()!;
-    if (visited.has(currentId)) {
-      continue;
-    }
-    visited.add(currentId);
-    const current = fn.body.blocks.get(currentId)!;
-    for (const pred of current.preds) {
-      const predPostDominator = postDominators.get(pred) ?? pred;
-      if (predPostDominator === targetId || result.has(predPostDominator)) {
-        result.add(pred);
-      }
-      queue.push(pred);
-    }
-  }
-  return result;
-}

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

@@ -954,7 +954,6 @@ function applyEffect(
         case ValueKind.Primitive: {
           break;
         }
-        case ValueKind.MaybeFrozen:
         case ValueKind.Frozen: {
           sourceType = 'frozen';
           break;

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

@@ -7,6 +7,7 @@
 
 import {CompilerError} from '..';
 import {
+  BlockId,
   Effect,
   Environment,
   HIRFunction,
@@ -14,12 +15,14 @@ import {
   IdentifierId,
   Instruction,
   Place,
+  computePostDominatorTree,
   evaluatesToStableTypeOrContainer,
   getHookKind,
   isStableType,
   isStableTypeContainer,
   isUseOperator,
 } from '../HIR';
+import {PostDominator} from '../HIR/Dominator';
 import {
   eachInstructionLValue,
   eachInstructionOperand,
@@ -32,7 +35,6 @@ import {
 } from '../ReactiveScopes/InferReactiveScopeVariables';
 import DisjointSet from '../Utils/DisjointSet';
 import {assertExhaustive} from '../Utils/utils';
-import {createControlDominators} from './ControlDominators';
 
 /**
  * Side map to track and propagate sources of stability (i.e. hook calls such as
@@ -210,9 +212,45 @@ export function inferReactivePlaces(fn: HIRFunction): void {
     reactiveIdentifiers.markReactive(place);
   }
 
-  const isReactiveControlledBlock = createControlDominators(fn, place =>
-    reactiveIdentifiers.isReactive(place),
-  );
+  const postDominators = computePostDominatorTree(fn, {
+    includeThrowsAsExitNode: false,
+  });
+  const postDominatorFrontierCache = new Map<BlockId, Set<BlockId>>();
+
+  function isReactiveControlledBlock(id: BlockId): boolean {
+    let controlBlocks = postDominatorFrontierCache.get(id);
+    if (controlBlocks === undefined) {
+      controlBlocks = postDominatorFrontier(fn, postDominators, id);
+      postDominatorFrontierCache.set(id, controlBlocks);
+    }
+    for (const blockId of controlBlocks) {
+      const controlBlock = fn.body.blocks.get(blockId)!;
+      switch (controlBlock.terminal.kind) {
+        case 'if':
+        case 'branch': {
+          if (reactiveIdentifiers.isReactive(controlBlock.terminal.test)) {
+            return true;
+          }
+          break;
+        }
+        case 'switch': {
+          if (reactiveIdentifiers.isReactive(controlBlock.terminal.test)) {
+            return true;
+          }
+          for (const case_ of controlBlock.terminal.cases) {
+            if (
+              case_.test !== null &&
+              reactiveIdentifiers.isReactive(case_.test)
+            ) {
+              return true;
+            }
+          }
+          break;
+        }
+      }
+    }
+    return false;
+  }
 
   do {
     for (const [, block] of fn.body.blocks) {
@@ -373,6 +411,61 @@ export function inferReactivePlaces(fn: HIRFunction): void {
   propagateReactivityToInnerFunctions(fn, true);
 }
 
+/*
+ * Computes the post-dominator frontier of @param block. These are immediate successors of nodes that
+ * post-dominate @param targetId and from which execution may not reach @param block. Intuitively, these
+ * are the earliest blocks from which execution branches such that it may or may not reach the target block.
+ */
+function postDominatorFrontier(
+  fn: HIRFunction,
+  postDominators: PostDominator<BlockId>,
+  targetId: BlockId,
+): Set<BlockId> {
+  const visited = new Set<BlockId>();
+  const frontier = new Set<BlockId>();
+  const targetPostDominators = postDominatorsOf(fn, postDominators, targetId);
+  for (const blockId of [...targetPostDominators, targetId]) {
+    if (visited.has(blockId)) {
+      continue;
+    }
+    visited.add(blockId);
+    const block = fn.body.blocks.get(blockId)!;
+    for (const pred of block.preds) {
+      if (!targetPostDominators.has(pred)) {
+        // The predecessor does not always reach this block, we found an item on the frontier!
+        frontier.add(pred);
+      }
+    }
+  }
+  return frontier;
+}
+
+function postDominatorsOf(
+  fn: HIRFunction,
+  postDominators: PostDominator<BlockId>,
+  targetId: BlockId,
+): Set<BlockId> {
+  const result = new Set<BlockId>();
+  const visited = new Set<BlockId>();
+  const queue = [targetId];
+  while (queue.length) {
+    const currentId = queue.shift()!;
+    if (visited.has(currentId)) {
+      continue;
+    }
+    visited.add(currentId);
+    const current = fn.body.blocks.get(currentId)!;
+    for (const pred of current.preds) {
+      const predPostDominator = postDominators.get(pred) ?? pred;
+      if (predPostDominator === targetId || result.has(predPostDominator)) {
+        result.add(pred);
+      }
+      queue.push(pred);
+    }
+  }
+  return result;
+}
+
 class ReactivityMap {
   hasChanges: boolean = false;
   reactive: Set<IdentifierId> = new Set();

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts

@@ -1359,6 +1359,8 @@ function codegenInstructionNullable(
       value = null;
     } else {
       lvalue = instr.value.lvalue.pattern;
+      let hasReassign = false;
+      let hasDeclaration = false;
       for (const place of eachPatternOperand(lvalue)) {
         if (
           kind !== InstructionKind.Reassign &&
@@ -1366,6 +1368,26 @@ function codegenInstructionNullable(
         ) {
           cx.temp.set(place.identifier.declarationId, null);
         }
+        const isDeclared = cx.hasDeclared(place.identifier);
+        hasReassign ||= isDeclared;
+        hasDeclaration ||= !isDeclared;
+      }
+      if (hasReassign && hasDeclaration) {
+        CompilerError.invariant(false, {
+          reason:
+            'Encountered a destructuring operation where some identifiers are already declared (reassignments) but others are not (declarations)',
+          description: null,
+          details: [
+            {
+              kind: 'error',
+              loc: instr.loc,
+              message: null,
+            },
+          ],
+          suggestions: null,
+        });
+      } else if (hasReassign) {
+        kind = InstructionKind.Reassign;
       }
       value = codegenPlaceToExpression(cx, instr.value.value);
     }

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/ExtractScopeDeclarationsFromDestructuring.ts

@@ -19,11 +19,7 @@ import {
   promoteTemporary,
 } from '../HIR';
 import {clonePlaceToTemporary} from '../HIR/HIRBuilder';
-import {
-  eachInstructionLValueWithKind,
-  eachPatternOperand,
-  mapPatternOperands,
-} from '../HIR/visitors';
+import {eachPatternOperand, mapPatternOperands} from '../HIR/visitors';
 import {
   ReactiveFunctionTransform,
   Transformed,
@@ -117,9 +113,6 @@ class Visitor extends ReactiveFunctionTransform<State> {
   ): Transformed<ReactiveStatement> {
     this.visitInstruction(instruction, state);
 
-    let instructionsToProcess: Array<ReactiveInstruction> = [instruction];
-    let result: Transformed<ReactiveStatement> = {kind: 'keep'};
-
     if (instruction.value.kind === 'Destructure') {
       const transformed = transformDestructuring(
         state,
@@ -127,8 +120,7 @@ class Visitor extends ReactiveFunctionTransform<State> {
         instruction.value,
       );
       if (transformed) {
-        instructionsToProcess = transformed;
-        result = {
+        return {
           kind: 'replace-many',
           value: transformed.map(instruction => ({
             kind: 'instruction',
@@ -137,17 +129,7 @@ class Visitor extends ReactiveFunctionTransform<State> {
         };
       }
     }
-
-    // Update state.declared with declarations from the instruction(s)
-    for (const instr of instructionsToProcess) {
-      for (const [place, kind] of eachInstructionLValueWithKind(instr)) {
-        if (kind !== InstructionKind.Reassign) {
-          state.declared.add(place.identifier.declarationId);
-        }
-      }
-    }
-
-    return result;
+    return {kind: 'keep'};
   }
 }
 
@@ -162,13 +144,10 @@ function transformDestructuring(
     const isDeclared = state.declared.has(place.identifier.declarationId);
     if (isDeclared) {
       reassigned.add(place.identifier.id);
-    } else {
-      hasDeclaration = true;
     }
+    hasDeclaration ||= !isDeclared;
   }
-  if (!hasDeclaration) {
-    // all reassignments
-    destructure.lvalue.kind = InstructionKind.Reassign;
+  if (reassigned.size === 0 || !hasDeclaration) {
     return null;
   }
   /*

compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts

@@ -25,7 +25,6 @@ import {
 } from '../HIR/HIR';
 import {
   BuiltInArrayId,
-  BuiltInEventHandlerId,
   BuiltInFunctionId,
   BuiltInJsxId,
   BuiltInMixedReadonlyId,
@@ -472,41 +471,6 @@ function* generateInstructionTypes(
           }
         }
       }
-      if (env.config.enableInferEventHandlers) {
-        if (
-          value.kind === 'JsxExpression' &&
-          value.tag.kind === 'BuiltinTag' &&
-          !value.tag.name.includes('-')
-        ) {
-          /*
-           * Infer event handler types for built-in DOM elements.
-           * Props starting with "on" (e.g., onClick, onSubmit) on primitive tags
-           * are inferred as event handlers. This allows functions with ref access
-           * to be passed to these props, since DOM event handlers are guaranteed
-           * by React to only execute in response to events, never during render.
-           *
-           * We exclude tags with hyphens to avoid web components (custom elements),
-           * which are required by the HTML spec to contain a hyphen. Web components
-           * may call event handler props during their lifecycle methods (e.g.,
-           * connectedCallback), which would be unsafe for ref access.
-           */
-          for (const prop of value.props) {
-            if (
-              prop.kind === 'JsxAttribute' &&
-              prop.name.startsWith('on') &&
-              prop.name.length > 2 &&
-              prop.name[2] === prop.name[2].toUpperCase()
-            ) {
-              yield equation(prop.place.identifier.type, {
-                kind: 'Function',
-                shapeId: BuiltInEventHandlerId,
-                return: makeType(),
-                isConstructor: false,
-              });
-            }
-          }
-        }
-      }
       yield equation(left, {kind: 'Object', shapeId: BuiltInJsxId});
       break;
     }

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

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {Result} from '../Utils/Result';
 import {CompilerDiagnostic, CompilerError, Effect} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {
@@ -21,8 +20,8 @@ import {
   isUseStateType,
   BasicBlock,
   isUseRefType,
+  GeneratedSource,
   SourceLocation,
-  ArrayExpression,
 } from '../HIR';
 import {eachInstructionLValue, eachInstructionOperand} from '../HIR/visitors';
 import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables';
@@ -37,23 +36,15 @@ type DerivationMetadata = {
   isStateSource: boolean;
 };
 
-type EffectMetadata = {
-  effect: HIRFunction;
-  dependencies: ArrayExpression;
-};
-
 type ValidationContext = {
   readonly functions: Map<IdentifierId, FunctionExpression>;
-  readonly candidateDependencies: Map<IdentifierId, ArrayExpression>;
   readonly errors: CompilerError;
   readonly derivationCache: DerivationCache;
-  readonly effectsCache: Map<IdentifierId, EffectMetadata>;
-  readonly setStateLoads: Map<IdentifierId, IdentifierId | null>;
-  readonly setStateUsages: Map<IdentifierId, Set<SourceLocation>>;
+  readonly effects: Set<HIRFunction>;
+  readonly setStateCache: Map<string | undefined | null, Array<Place>>;
+  readonly effectSetStateCache: Map<string | undefined | null, Array<Place>>;
 };
 
-const MAX_FIXPOINT_ITERATIONS = 100;
-
 class DerivationCache {
   hasChanges: boolean = false;
   cache: Map<IdentifierId, DerivationMetadata> = new Map();
@@ -182,24 +173,25 @@ function isNamedIdentifier(place: Place): place is Place & {
  */
 export function validateNoDerivedComputationsInEffects_exp(
   fn: HIRFunction,
-): Result<void, CompilerError> {
+): void {
   const functions: Map<IdentifierId, FunctionExpression> = new Map();
-  const candidateDependencies: Map<IdentifierId, ArrayExpression> = new Map();
   const derivationCache = new DerivationCache();
   const errors = new CompilerError();
-  const effectsCache: Map<IdentifierId, EffectMetadata> = new Map();
+  const effects: Set<HIRFunction> = new Set();
 
-  const setStateLoads: Map<IdentifierId, IdentifierId> = new Map();
-  const setStateUsages: Map<IdentifierId, Set<SourceLocation>> = new Map();
+  const setStateCache: Map<string | undefined | null, Array<Place>> = new Map();
+  const effectSetStateCache: Map<
+    string | undefined | null,
+    Array<Place>
+  > = new Map();
 
   const context: ValidationContext = {
     functions,
-    candidateDependencies,
     errors,
     derivationCache,
-    effectsCache,
-    setStateLoads,
-    setStateUsages,
+    effects,
+    setStateCache,
+    effectSetStateCache,
   };
 
   if (fn.fnType === 'Hook') {
@@ -226,7 +218,6 @@ export function validateNoDerivedComputationsInEffects_exp(
   }
 
   let isFirstPass = true;
-  let iterationCount = 0;
   do {
     context.derivationCache.takeSnapshot();
 
@@ -239,26 +230,15 @@ 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) {
-    validateEffect(effect.effect, effect.dependencies, context);
+  for (const effect of effects) {
+    validateEffect(effect, context);
   }
 
-  return errors.asResult();
+  if (errors.hasAnyErrors()) {
+    throw errors;
+  }
 }
 
 function recordPhiDerivations(
@@ -302,61 +282,11 @@ function joinValue(
   return 'fromPropsAndState';
 }
 
-function getRootSetState(
-  key: IdentifierId,
-  loads: Map<IdentifierId, IdentifierId | null>,
-  visited: Set<IdentifierId> = new Set(),
-): IdentifierId | null {
-  if (visited.has(key)) {
-    return null;
-  }
-  visited.add(key);
-
-  const parentId = loads.get(key);
-
-  if (parentId === undefined) {
-    return null;
-  }
-
-  if (parentId === null) {
-    return key;
-  }
-
-  return getRootSetState(parentId, loads, visited);
-}
-
-function maybeRecordSetState(
-  instr: Instruction,
-  loads: Map<IdentifierId, IdentifierId | null>,
-  usages: Map<IdentifierId, Set<SourceLocation>>,
-): void {
-  for (const operand of eachInstructionLValue(instr)) {
-    if (
-      instr.value.kind === 'LoadLocal' &&
-      loads.has(instr.value.place.identifier.id)
-    ) {
-      loads.set(operand.identifier.id, instr.value.place.identifier.id);
-    } else {
-      if (isSetStateType(operand.identifier)) {
-        // this is a root setState
-        loads.set(operand.identifier.id, null);
-      }
-    }
-
-    const rootSetState = getRootSetState(operand.identifier.id, loads);
-    if (rootSetState !== null && usages.get(rootSetState) === undefined) {
-      usages.set(rootSetState, new Set([operand.loc]));
-    }
-  }
-}
-
 function recordInstructionDerivations(
   instr: Instruction,
   context: ValidationContext,
   isFirstPass: boolean,
 ): void {
-  maybeRecordSetState(instr, context.setStateLoads, context.setStateUsages);
-
   let typeOfValue: TypeOfValue = 'ignored';
   let isSource: boolean = false;
   const sources: Set<IdentifierId> = new Set();
@@ -379,37 +309,25 @@ function recordInstructionDerivations(
       value.args[1].kind === 'Identifier'
     ) {
       const effectFunction = context.functions.get(value.args[0].identifier.id);
-      const deps = context.candidateDependencies.get(
-        value.args[1].identifier.id,
-      );
-      if (effectFunction != null && deps != null) {
-        context.effectsCache.set(value.args[0].identifier.id, {
-          effect: effectFunction.loweredFunc.func,
-          dependencies: deps,
-        });
+      if (effectFunction != null) {
+        context.effects.add(effectFunction.loweredFunc.func);
       }
     } else if (isUseStateType(lvalue.identifier) && value.args.length > 0) {
-      typeOfValue = 'fromState';
-      context.derivationCache.addDerivationEntry(
-        lvalue,
-        new Set(),
-        typeOfValue,
-        true,
-      );
-      return;
+      isSource = true;
+      typeOfValue = joinValue(typeOfValue, 'fromState');
     }
-  } else if (value.kind === 'ArrayExpression') {
-    context.candidateDependencies.set(lvalue.identifier.id, value);
   }
 
   for (const operand of eachInstructionOperand(instr)) {
-    if (context.setStateLoads.has(operand.identifier.id)) {
-      const rootSetStateId = getRootSetState(
-        operand.identifier.id,
-        context.setStateLoads,
-      );
-      if (rootSetStateId !== null) {
-        context.setStateUsages.get(rootSetStateId)?.add(operand.loc);
+    if (
+      isSetStateType(operand.identifier) &&
+      operand.loc !== GeneratedSource &&
+      isFirstPass
+    ) {
+      if (context.setStateCache.has(operand.loc.identifierName)) {
+        context.setStateCache.get(operand.loc.identifierName)!.push(operand);
+      } else {
+        context.setStateCache.set(operand.loc.identifierName, [operand]);
       }
     }
 
@@ -438,14 +356,6 @@ 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:
@@ -536,19 +446,6 @@ 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,
@@ -628,72 +525,21 @@ function renderTree(
   return result;
 }
 
-function getFnLocalDeps(
-  fn: FunctionExpression | undefined,
-): Set<IdentifierId> | undefined {
-  if (!fn) {
-    return undefined;
-  }
-
-  const deps: Set<IdentifierId> = new Set();
-
-  for (const [, block] of fn.loweredFunc.func.body.blocks) {
-    for (const instr of block.instructions) {
-      if (instr.value.kind === 'LoadLocal') {
-        deps.add(instr.value.place.identifier.id);
-      }
-    }
-  }
-
-  return deps;
-}
-
 function validateEffect(
   effectFunction: HIRFunction,
-  dependencies: ArrayExpression,
   context: ValidationContext,
 ): void {
   const seenBlocks: Set<BlockId> = new Set();
 
   const effectDerivedSetStateCalls: Array<{
     value: CallExpression;
-    id: IdentifierId;
+    loc: SourceLocation;
     sourceIds: Set<IdentifierId>;
     typeOfValue: TypeOfValue;
   }> = [];
 
-  const effectSetStateUsages: Map<
-    IdentifierId,
-    Set<SourceLocation>
-  > = new Map();
-
-  // Consider setStates in the effect's dependency array as being part of effectSetStateUsages
-  for (const dep of dependencies.elements) {
-    if (dep.kind === 'Identifier') {
-      const root = getRootSetState(dep.identifier.id, context.setStateLoads);
-      if (root !== null) {
-        effectSetStateUsages.set(root, new Set([dep.loc]));
-      }
-    }
-  }
-
-  let cleanUpFunctionDeps: Set<IdentifierId> | undefined;
-
   const globals: Set<IdentifierId> = new Set();
   for (const block of effectFunction.body.blocks.values()) {
-    /*
-     * if the block is in an effect and is of type return then its an effect's cleanup function
-     * if the cleanup function depends on a value from which effect-set state is derived then
-     * we can't validate
-     */
-    if (
-      block.terminal.kind === 'return' &&
-      block.terminal.returnVariant === 'Explicit'
-    ) {
-      cleanUpFunctionDeps = getFnLocalDeps(
-        context.functions.get(block.terminal.value.identifier.id),
-      );
-    }
     for (const pred of block.preds) {
       if (!seenBlocks.has(pred)) {
         // skip if block has a back edge
@@ -707,16 +553,19 @@ function validateEffect(
         return;
       }
 
-      maybeRecordSetState(instr, context.setStateLoads, effectSetStateUsages);
-
       for (const operand of eachInstructionOperand(instr)) {
-        if (context.setStateLoads.has(operand.identifier.id)) {
-          const rootSetStateId = getRootSetState(
-            operand.identifier.id,
-            context.setStateLoads,
-          );
-          if (rootSetStateId !== null) {
-            effectSetStateUsages.get(rootSetStateId)?.add(operand.loc);
+        if (
+          isSetStateType(operand.identifier) &&
+          operand.loc !== GeneratedSource
+        ) {
+          if (context.effectSetStateCache.has(operand.loc.identifierName)) {
+            context.effectSetStateCache
+              .get(operand.loc.identifierName)!
+              .push(operand);
+          } else {
+            context.effectSetStateCache.set(operand.loc.identifierName, [
+              operand,
+            ]);
           }
         }
       }
@@ -727,18 +576,6 @@ function validateEffect(
         instr.value.args.length === 1 &&
         instr.value.args[0].kind === 'Identifier'
       ) {
-        const calleeMetadata = context.derivationCache.cache.get(
-          instr.value.callee.identifier.id,
-        );
-
-        /*
-         * If the setState comes from a source other than local state skip
-         * since the fix is not to calculate in render
-         */
-        if (calleeMetadata?.typeOfValue != 'fromState') {
-          continue;
-        }
-
         const argMetadata = context.derivationCache.cache.get(
           instr.value.args[0].identifier.id,
         );
@@ -746,7 +583,7 @@ function validateEffect(
         if (argMetadata !== undefined) {
           effectDerivedSetStateCalls.push({
             value: instr.value,
-            id: instr.value.callee.identifier.id,
+            loc: instr.value.callee.loc,
             sourceIds: argMetadata.sourcesIds,
             typeOfValue: argMetadata.typeOfValue,
           });
@@ -780,17 +617,15 @@ function validateEffect(
   }
 
   for (const derivedSetStateCall of effectDerivedSetStateCalls) {
-    const rootSetStateCall = getRootSetState(
-      derivedSetStateCall.id,
-      context.setStateLoads,
-    );
-
     if (
-      rootSetStateCall !== null &&
-      effectSetStateUsages.has(rootSetStateCall) &&
-      context.setStateUsages.has(rootSetStateCall) &&
-      effectSetStateUsages.get(rootSetStateCall)!.size ===
-        context.setStateUsages.get(rootSetStateCall)!.size - 1
+      derivedSetStateCall.loc !== GeneratedSource &&
+      context.effectSetStateCache.has(derivedSetStateCall.loc.identifierName) &&
+      context.setStateCache.has(derivedSetStateCall.loc.identifierName) &&
+      context.effectSetStateCache.get(derivedSetStateCall.loc.identifierName)!
+        .length ===
+        context.setStateCache.get(derivedSetStateCall.loc.identifierName)!
+          .length -
+          1
     ) {
       const propsSet = new Set<string>();
       const stateSet = new Set<string>();
@@ -816,12 +651,6 @@ function validateEffect(
         ),
       );
 
-      for (const dep of derivedSetStateCall.sourceIds) {
-        if (cleanUpFunctionDeps !== undefined && cleanUpFunctionDeps.has(dep)) {
-          return;
-        }
-      }
-
       const propsArr = Array.from(propsSet);
       const stateArr = Array.from(stateSet);
 

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

@@ -14,14 +14,12 @@ import {
   BlockId,
   HIRFunction,
   IdentifierId,
-  Identifier,
   Place,
   SourceLocation,
   getHookKindForType,
   isRefValueType,
   isUseRefType,
 } from '../HIR';
-import {BuiltInEventHandlerId} from '../HIR/ObjectShape';
 import {
   eachInstructionOperand,
   eachInstructionValueOperand,
@@ -185,11 +183,6 @@ function refTypeOfType(place: Place): RefAccessType {
   }
 }
 
-function isEventHandlerType(identifier: Identifier): boolean {
-  const type = identifier.type;
-  return type.kind === 'Function' && type.shapeId === BuiltInEventHandlerId;
-}
-
 function tyEqual(a: RefAccessType, b: RefAccessType): boolean {
   if (a.kind !== b.kind) {
     return false;
@@ -526,9 +519,6 @@ function validateNoRefAccessInRenderImpl(
              */
             if (!didError) {
               const isRefLValue = isUseRefType(instr.lvalue.identifier);
-              const isEventHandlerLValue = isEventHandlerType(
-                instr.lvalue.identifier,
-              );
               for (const operand of eachInstructionValueOperand(instr.value)) {
                 /**
                  * By default we check that function call operands are not refs,
@@ -536,16 +526,29 @@ function validateNoRefAccessInRenderImpl(
                  */
                 if (
                   isRefLValue ||
-                  isEventHandlerLValue ||
                   (hookKind != null &&
                     hookKind !== 'useState' &&
                     hookKind !== 'useReducer')
                 ) {
                   /**
-                   * Allow passing refs or ref-accessing functions when:
-                   * 1. lvalue is a ref (mergeRefs pattern: `mergeRefs(ref1, ref2)`)
-                   * 2. lvalue is an event handler (DOM events execute outside render)
-                   * 3. calling hooks (independently validated for ref safety)
+                   * Special cases:
+                   *
+                   * 1. the lvalue is a ref
+                   * In general passing a ref to a function may access that ref
+                   * value during render, so we disallow it.
+                   *
+                   * The main exception is the "mergeRefs" pattern, ie a function
+                   * that accepts multiple refs as arguments (or an array of refs)
+                   * and returns a new, aggregated ref. If the lvalue is a ref,
+                   * we assume that the user is doing this pattern and allow passing
+                   * refs.
+                   *
+                   * Eg `const mergedRef = mergeRefs(ref1, ref2)`
+                   *
+                   * 2. calling hooks
+                   *
+                   * Hooks are independently checked to ensure they don't access refs
+                   * during render.
                    */
                   validateNoDirectRefValueAccess(errors, operand, env);
                 } else if (interpolatedAsJsx.has(instr.lvalue.identifier.id)) {

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

@@ -21,17 +21,13 @@ import {
   isUseRefType,
   isRefValueType,
   Place,
-  Effect,
-  BlockId,
 } from '../HIR';
 import {
   eachInstructionLValue,
   eachInstructionValueOperand,
 } from '../HIR/visitors';
-import {createControlDominators} from '../Inference/ControlDominators';
-import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables';
 import {Result} from '../Utils/Result';
-import {assertExhaustive, Iterable_some} from '../Utils/utils';
+import {Iterable_some} from '../Utils/utils';
 
 /**
  * Validates against calling setState in the body of an effect (useEffect and friends),
@@ -144,8 +140,6 @@ function getSetStateCall(
   setStateFunctions: Map<IdentifierId, Place>,
   env: Environment,
 ): Place | null {
-  const enableAllowSetStateFromRefsInEffects =
-    env.config.enableAllowSetStateFromRefsInEffects;
   const refDerivedValues: Set<IdentifierId> = new Set();
 
   const isDerivedFromRef = (place: Place): boolean => {
@@ -156,38 +150,9 @@ function getSetStateCall(
     );
   };
 
-  const isRefControlledBlock: (id: BlockId) => boolean =
-    enableAllowSetStateFromRefsInEffects
-      ? createControlDominators(fn, place => isDerivedFromRef(place))
-      : (): boolean => false;
-
   for (const [, block] of fn.body.blocks) {
-    if (enableAllowSetStateFromRefsInEffects) {
-      for (const phi of block.phis) {
-        if (isDerivedFromRef(phi.place)) {
-          continue;
-        }
-        let isPhiDerivedFromRef = false;
-        for (const [, operand] of phi.operands) {
-          if (isDerivedFromRef(operand)) {
-            isPhiDerivedFromRef = true;
-            break;
-          }
-        }
-        if (isPhiDerivedFromRef) {
-          refDerivedValues.add(phi.place.identifier.id);
-        } else {
-          for (const [pred] of phi.operands) {
-            if (isRefControlledBlock(pred)) {
-              refDerivedValues.add(phi.place.identifier.id);
-              break;
-            }
-          }
-        }
-      }
-    }
     for (const instr of block.instructions) {
-      if (enableAllowSetStateFromRefsInEffects) {
+      if (env.config.enableAllowSetStateFromRefsInEffects) {
         const hasRefOperand = Iterable_some(
           eachInstructionValueOperand(instr.value),
           isDerivedFromRef,
@@ -197,46 +162,6 @@ function getSetStateCall(
           for (const lvalue of eachInstructionLValue(instr)) {
             refDerivedValues.add(lvalue.identifier.id);
           }
-          // Ref-derived values can also propagate through mutation
-          for (const operand of eachInstructionValueOperand(instr.value)) {
-            switch (operand.effect) {
-              case Effect.Capture:
-              case Effect.Store:
-              case Effect.ConditionallyMutate:
-              case Effect.ConditionallyMutateIterator:
-              case Effect.Mutate: {
-                if (isMutable(instr, operand)) {
-                  refDerivedValues.add(operand.identifier.id);
-                }
-                break;
-              }
-              case Effect.Freeze:
-              case Effect.Read: {
-                // no-op
-                break;
-              }
-              case Effect.Unknown: {
-                CompilerError.invariant(false, {
-                  reason: 'Unexpected unknown effect',
-                  description: null,
-                  details: [
-                    {
-                      kind: 'error',
-                      loc: operand.loc,
-                      message: null,
-                    },
-                  ],
-                  suggestions: null,
-                });
-              }
-              default: {
-                assertExhaustive(
-                  operand.effect,
-                  `Unexpected effect kind \`${operand.effect}\``,
-                );
-              }
-            }
-          }
         }
 
         if (
@@ -278,7 +203,7 @@ function getSetStateCall(
             isSetStateType(callee.identifier) ||
             setStateFunctions.has(callee.identifier.id)
           ) {
-            if (enableAllowSetStateFromRefsInEffects) {
+            if (env.config.enableAllowSetStateFromRefsInEffects) {
               const arg = instr.value.args.at(0);
               if (
                 arg !== undefined &&
@@ -291,8 +216,6 @@ function getSetStateCall(
                  * be needed when initial layout measurements from refs need to be stored in state.
                  */
                 return null;
-              } else if (isRefControlledBlock(block.id)) {
-                continue;
               }
             }
             /*

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

@@ -1,206 +0,0 @@
-/**
- * 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 {NodePath} from '@babel/traverse';
-import * as t from '@babel/types';
-import {CompilerDiagnostic, CompilerError, ErrorCategory} from '..';
-import {CodegenFunction} from '../ReactiveScopes';
-import {Result} from '../Utils/Result';
-
-/**
- * IMPORTANT: This validation is only intended for use in unit tests.
- * It is not intended for use in production.
- *
- * This validation is used to ensure that the generated AST has proper source locations
- * for "important" original nodes.
- *
- * There's one big gotcha with this validation: it only works if the "important" original nodes
- * are not optimized away by the compiler.
- *
- * When that scenario happens, we should just update the fixture to not include a node that has no
- * corresponding node in the generated AST due to being completely removed during compilation.
- */
-
-/**
- * Some common node types that are important for coverage tracking.
- * Based on istanbul-lib-instrument
- */
-const IMPORTANT_INSTRUMENTED_TYPES = new Set([
-  'ArrowFunctionExpression',
-  'AssignmentPattern',
-  'ObjectMethod',
-  'ExpressionStatement',
-  'BreakStatement',
-  'ContinueStatement',
-  'ReturnStatement',
-  'ThrowStatement',
-  'TryStatement',
-  'VariableDeclarator',
-  'IfStatement',
-  'ForStatement',
-  'ForInStatement',
-  'ForOfStatement',
-  'WhileStatement',
-  'DoWhileStatement',
-  'SwitchStatement',
-  'SwitchCase',
-  'WithStatement',
-  'FunctionDeclaration',
-  'FunctionExpression',
-  'LabeledStatement',
-  'ConditionalExpression',
-  'LogicalExpression',
-]);
-
-/**
- * Check if a node is a manual memoization call that the compiler optimizes away.
- * These include useMemo and useCallback calls, which are intentionally removed
- * by the DropManualMemoization pass.
- */
-function isManualMemoization(node: t.Node): boolean {
-  // Check if this is a useMemo/useCallback call expression
-  if (t.isCallExpression(node)) {
-    const callee = node.callee;
-    if (t.isIdentifier(callee)) {
-      return callee.name === 'useMemo' || callee.name === 'useCallback';
-    }
-    if (
-      t.isMemberExpression(callee) &&
-      t.isIdentifier(callee.property) &&
-      t.isIdentifier(callee.object)
-    ) {
-      return (
-        callee.object.name === 'React' &&
-        (callee.property.name === 'useMemo' ||
-          callee.property.name === 'useCallback')
-      );
-    }
-  }
-
-  return false;
-}
-
-/**
- * Create a location key for comparison. We compare by line/column/source,
- * not by object identity.
- */
-function locationKey(loc: t.SourceLocation): string {
-  return `${loc.start.line}:${loc.start.column}-${loc.end.line}:${loc.end.column}`;
-}
-
-/**
- * Validates that important source locations from the original code are preserved
- * in the generated AST. This ensures that Istanbul coverage instrumentation can
- * properly map back to the original source code.
- *
- * The validator:
- * 1. Collects locations from "important" nodes in the original AST (those that
- *    Istanbul instruments for coverage tracking)
- * 2. Exempts known compiler optimizations (useMemo/useCallback removal)
- * 3. Verifies that all important locations appear somewhere in the generated AST
- *
- * Missing locations can cause Istanbul to fail to track coverage for certain
- * code paths, leading to inaccurate coverage reports.
- */
-export function validateSourceLocations(
-  func: NodePath<
-    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
-  >,
-  generatedAst: CodegenFunction,
-): Result<void, CompilerError> {
-  const errors = new CompilerError();
-
-  // Step 1: Collect important locations from the original source
-  const importantOriginalLocations = new Map<
-    string,
-    {loc: t.SourceLocation; nodeType: string}
-  >();
-
-  func.traverse({
-    enter(path) {
-      const node = path.node;
-
-      // Only track node types that Istanbul instruments
-      if (!IMPORTANT_INSTRUMENTED_TYPES.has(node.type)) {
-        return;
-      }
-
-      // Skip manual memoization that the compiler intentionally removes
-      if (isManualMemoization(node)) {
-        return;
-      }
-
-      // Collect the location if it exists
-      if (node.loc) {
-        const key = locationKey(node.loc);
-        importantOriginalLocations.set(key, {
-          loc: node.loc,
-          nodeType: node.type,
-        });
-      }
-    },
-  });
-
-  // Step 2: Collect all locations from the generated AST
-  const generatedLocations = new Set<string>();
-
-  function collectGeneratedLocations(node: t.Node): void {
-    if (node.loc) {
-      generatedLocations.add(locationKey(node.loc));
-    }
-
-    // Use Babel's VISITOR_KEYS to traverse only actual node properties
-    const keys = t.VISITOR_KEYS[node.type as keyof typeof t.VISITOR_KEYS];
-
-    if (!keys) {
-      return;
-    }
-
-    for (const key of keys) {
-      const value = (node as any)[key];
-
-      if (Array.isArray(value)) {
-        for (const item of value) {
-          if (t.isNode(item)) {
-            collectGeneratedLocations(item);
-          }
-        }
-      } else if (t.isNode(value)) {
-        collectGeneratedLocations(value);
-      }
-    }
-  }
-
-  // Collect from main function body
-  collectGeneratedLocations(generatedAst.body);
-
-  // Collect from outlined functions
-  for (const outlined of generatedAst.outlined) {
-    collectGeneratedLocations(outlined.fn.body);
-  }
-
-  // Step 3: Validate that all important locations are preserved
-  for (const [key, {loc, nodeType}] of importantOriginalLocations) {
-    if (!generatedLocations.has(key)) {
-      errors.pushDiagnostic(
-        CompilerDiagnostic.create({
-          category: ErrorCategory.Todo,
-          reason: 'Important source location missing in generated code',
-          description:
-            `Source location for ${nodeType} is missing in the generated output. This can cause coverage instrumentation ` +
-            `to fail to track this code properly, resulting in inaccurate coverage reports.`,
-        }).withDetails({
-          kind: 'error',
-          loc,
-          message: null,
-        }),
-      );
-    }
-  }
-
-  return errors.asResult();
-}

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

@@ -12,5 +12,4 @@ export {validateNoCapitalizedCalls} from './ValidateNoCapitalizedCalls';
 export {validateNoRefAccessInRender} from './ValidateNoRefAccessInRender';
 export {validateNoSetStateInRender} from './ValidateNoSetStateInRender';
 export {validatePreservedManualMemoization} from './ValidatePreservedManualMemoization';
-export {validateSourceLocations} from './ValidateSourceLocations';
 export {validateUseMemo} from './ValidateUseMemo';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-async-event-handler-wrapper.expect.md

@@ -1,148 +0,0 @@
-
-## Input
-
-```javascript
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates react-hook-form's handleSubmit
-function handleSubmit<T>(callback: (data: T) => void | Promise<void>) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-// Simulates an upload function
-async function upload(file: any): Promise<{blob: {url: string}}> {
-  return {blob: {url: 'https://example.com/file.jpg'}};
-}
-
-interface SignatureRef {
-  toFile(): any;
-}
-
-function Component() {
-  const ref = useRef<SignatureRef>(null);
-
-  const onSubmit = async (value: any) => {
-    // This should be allowed: accessing ref.current in an async event handler
-    // that's wrapped and passed to onSubmit prop
-    let sigUrl: string;
-    if (value.hasSignature) {
-      const {blob} = await upload(ref.current?.toFile());
-      sigUrl = blob?.url || '';
-    } else {
-      sigUrl = value.signature;
-    }
-    console.log('Signature URL:', sigUrl);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input type="text" name="signature" />
-      <button type="submit">Submit</button>
-    </form>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @enableInferEventHandlers
-import { useRef } from "react";
-
-// Simulates react-hook-form's handleSubmit
-function handleSubmit(callback) {
-  const $ = _c(2);
-  let t0;
-  if ($[0] !== callback) {
-    t0 = (event) => {
-      event.preventDefault();
-      callback({} as T);
-    };
-    $[0] = callback;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  return t0;
-}
-
-// Simulates an upload function
-async function upload(file) {
-  const $ = _c(1);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = { blob: { url: "https://example.com/file.jpg" } };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}
-
-interface SignatureRef {
-  toFile(): any;
-}
-
-function Component() {
-  const $ = _c(4);
-  const ref = useRef(null);
-
-  const onSubmit = async (value) => {
-    let sigUrl;
-    if (value.hasSignature) {
-      const { blob } = await upload(ref.current?.toFile());
-      sigUrl = blob?.url || "";
-    } else {
-      sigUrl = value.signature;
-    }
-
-    console.log("Signature URL:", sigUrl);
-  };
-
-  const t0 = handleSubmit(onSubmit);
-  let t1;
-  let t2;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = <input type="text" name="signature" />;
-    t2 = <button type="submit">Submit</button>;
-    $[0] = t1;
-    $[1] = t2;
-  } else {
-    t1 = $[0];
-    t2 = $[1];
-  }
-  let t3;
-  if ($[2] !== t0) {
-    t3 = (
-      <form onSubmit={t0}>
-        {t1}
-        {t2}
-      </form>
-    );
-    $[2] = t0;
-    $[3] = t3;
-  } else {
-    t3 = $[3];
-  }
-  return t3;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-      
-### Eval output
-(kind: ok) <form><input type="text" name="signature"><button type="submit">Submit</button></form>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-async-event-handler-wrapper.tsx

@@ -1,48 +0,0 @@
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates react-hook-form's handleSubmit
-function handleSubmit<T>(callback: (data: T) => void | Promise<void>) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-// Simulates an upload function
-async function upload(file: any): Promise<{blob: {url: string}}> {
-  return {blob: {url: 'https://example.com/file.jpg'}};
-}
-
-interface SignatureRef {
-  toFile(): any;
-}
-
-function Component() {
-  const ref = useRef<SignatureRef>(null);
-
-  const onSubmit = async (value: any) => {
-    // This should be allowed: accessing ref.current in an async event handler
-    // that's wrapped and passed to onSubmit prop
-    let sigUrl: string;
-    if (value.hasSignature) {
-      const {blob} = await upload(ref.current?.toFile());
-      sigUrl = blob?.url || '';
-    } else {
-      sigUrl = value.signature;
-    }
-    console.log('Signature URL:', sigUrl);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input type="text" name="signature" />
-      <button type="submit">Submit</button>
-    </form>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-event-handler-wrapper.expect.md

@@ -1,101 +0,0 @@
-
-## Input
-
-```javascript
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates react-hook-form's handleSubmit or similar event handler wrappers
-function handleSubmit<T>(callback: (data: T) => void) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-function Component() {
-  const ref = useRef<HTMLInputElement>(null);
-
-  const onSubmit = (data: any) => {
-    // This should be allowed: accessing ref.current in an event handler
-    // that's wrapped by handleSubmit and passed to onSubmit prop
-    if (ref.current !== null) {
-      console.log(ref.current.value);
-    }
-  };
-
-  return (
-    <>
-      <input ref={ref} />
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <button type="submit">Submit</button>
-      </form>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @enableInferEventHandlers
-import { useRef } from "react";
-
-// Simulates react-hook-form's handleSubmit or similar event handler wrappers
-function handleSubmit(callback) {
-  const $ = _c(2);
-  let t0;
-  if ($[0] !== callback) {
-    t0 = (event) => {
-      event.preventDefault();
-      callback({} as T);
-    };
-    $[0] = callback;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  return t0;
-}
-
-function Component() {
-  const $ = _c(1);
-  const ref = useRef(null);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    const onSubmit = (data) => {
-      if (ref.current !== null) {
-        console.log(ref.current.value);
-      }
-    };
-
-    t0 = (
-      <>
-        <input ref={ref} />
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <button type="submit">Submit</button>
-        </form>
-      </>
-    );
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-      
-### Eval output
-(kind: ok) <input><form><button type="submit">Submit</button></form>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-event-handler-wrapper.tsx

@@ -1,36 +0,0 @@
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates react-hook-form's handleSubmit or similar event handler wrappers
-function handleSubmit<T>(callback: (data: T) => void) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-function Component() {
-  const ref = useRef<HTMLInputElement>(null);
-
-  const onSubmit = (data: any) => {
-    // This should be allowed: accessing ref.current in an event handler
-    // that's wrapped by handleSubmit and passed to onSubmit prop
-    if (ref.current !== null) {
-      console.log(ref.current.value);
-    }
-  };
-
-  return (
-    <>
-      <input ref={ref} />
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <button type="submit">Submit</button>
-      </form>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.expect.md

@@ -1,86 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({value, enabled}) {
-  const [localValue, setLocalValue] = useState('');
-
-  useEffect(() => {
-    if (enabled) {
-      setLocalValue(value);
-    } else {
-      setLocalValue('disabled');
-    }
-  }, [value, enabled]);
-
-  return <div>{localValue}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 'test', enabled: true}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-function Component(t0) {
-  const $ = _c(6);
-  const { value, enabled } = t0;
-  const [localValue, setLocalValue] = useState("");
-  let t1;
-  let t2;
-  if ($[0] !== enabled || $[1] !== value) {
-    t1 = () => {
-      if (enabled) {
-        setLocalValue(value);
-      } else {
-        setLocalValue("disabled");
-      }
-    };
-
-    t2 = [value, enabled];
-    $[0] = enabled;
-    $[1] = value;
-    $[2] = t1;
-    $[3] = t2;
-  } else {
-    t1 = $[2];
-    t2 = $[3];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[4] !== localValue) {
-    t3 = <div>{localValue}</div>;
-    $[4] = localValue;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  return t3;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ value: "test", enabled: true }],
-};
-
-```
-
-## 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\nProps: [value]\n\nData Flow Tree:\n└── value (Prop)\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":9,"column":6,"index":244},"end":{"line":9,"column":19,"index":257},"filename":"derived-state-conditionally-in-effect.ts","identifierName":"setLocalValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":16,"column":1,"index":378},"filename":"derived-state-conditionally-in-effect.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>test</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.expect.md

@@ -1,78 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-export default function Component({input = 'empty'}) {
-  const [currInput, setCurrInput] = useState(input);
-  const localConst = 'local const';
-
-  useEffect(() => {
-    setCurrInput(input + localConst);
-  }, [input, localConst]);
-
-  return <div>{currInput}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{input: 'test'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-export default function Component(t0) {
-  const $ = _c(5);
-  const { input: t1 } = t0;
-  const input = t1 === undefined ? "empty" : t1;
-  const [currInput, setCurrInput] = useState(input);
-  let t2;
-  let t3;
-  if ($[0] !== input) {
-    t2 = () => {
-      setCurrInput(input + "local const");
-    };
-    t3 = [input, "local const"];
-    $[0] = input;
-    $[1] = t2;
-    $[2] = t3;
-  } else {
-    t2 = $[1];
-    t3 = $[2];
-  }
-  useEffect(t2, t3);
-  let t4;
-  if ($[3] !== currInput) {
-    t4 = <div>{currInput}</div>;
-    $[3] = currInput;
-    $[4] = t4;
-  } else {
-    t4 = $[4];
-  }
-  return t4;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ input: "test" }],
-};
-
-```
-
-## 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\nProps: [input]\n\nData Flow Tree:\n└── input (Prop)\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":9,"column":4,"index":276},"end":{"line":9,"column":16,"index":288},"filename":"derived-state-from-default-props.ts","identifierName":"setCurrInput"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":122},"end":{"line":13,"column":1,"index":372},"filename":"derived-state-from-default-props.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>testlocal const</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-local-state-in-effect.expect.md

@@ -1,77 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-import {useEffect, useState} from 'react';
-
-function Component({shouldChange}) {
-  const [count, setCount] = useState(0);
-
-  useEffect(() => {
-    if (shouldChange) {
-      setCount(count + 1);
-    }
-  }, [count]);
-
-  return <div>{count}</div>;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-import { useEffect, useState } from "react";
-
-function Component(t0) {
-  const $ = _c(7);
-  const { shouldChange } = t0;
-  const [count, setCount] = useState(0);
-  let t1;
-  if ($[0] !== count || $[1] !== shouldChange) {
-    t1 = () => {
-      if (shouldChange) {
-        setCount(count + 1);
-      }
-    };
-    $[0] = count;
-    $[1] = shouldChange;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== count) {
-    t2 = [count];
-    $[3] = count;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[5] !== count) {
-    t3 = <div>{count}</div>;
-    $[5] = count;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  return t3;
-}
-
-```
-
-## 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: [count]\n\nData Flow Tree:\n└── count (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":10,"column":6,"index":237},"end":{"line":10,"column":14,"index":245},"filename":"derived-state-from-local-state-in-effect.ts","identifierName":"setCount"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":108},"end":{"line":15,"column":1,"index":310},"filename":"derived-state-from-local-state-in-effect.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-local-state-and-component-scope.expect.md

@@ -1,115 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({firstName}) {
-  const [lastName, setLastName] = useState('Doe');
-  const [fullName, setFullName] = useState('John');
-
-  const middleName = 'D.';
-
-  useEffect(() => {
-    setFullName(firstName + ' ' + middleName + ' ' + lastName);
-  }, [firstName, middleName, lastName]);
-
-  return (
-    <div>
-      <input value={lastName} onChange={e => setLastName(e.target.value)} />
-      <div>{fullName}</div>
-    </div>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{firstName: 'John'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-function Component(t0) {
-  const $ = _c(12);
-  const { firstName } = t0;
-  const [lastName, setLastName] = useState("Doe");
-  const [fullName, setFullName] = useState("John");
-  let t1;
-  let t2;
-  if ($[0] !== firstName || $[1] !== lastName) {
-    t1 = () => {
-      setFullName(firstName + " " + "D." + " " + lastName);
-    };
-    t2 = [firstName, "D.", lastName];
-    $[0] = firstName;
-    $[1] = lastName;
-    $[2] = t1;
-    $[3] = t2;
-  } else {
-    t1 = $[2];
-    t2 = $[3];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = (e) => setLastName(e.target.value);
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  let t4;
-  if ($[5] !== lastName) {
-    t4 = <input value={lastName} onChange={t3} />;
-    $[5] = lastName;
-    $[6] = t4;
-  } else {
-    t4 = $[6];
-  }
-  let t5;
-  if ($[7] !== fullName) {
-    t5 = <div>{fullName}</div>;
-    $[7] = fullName;
-    $[8] = t5;
-  } else {
-    t5 = $[8];
-  }
-  let t6;
-  if ($[9] !== t4 || $[10] !== t5) {
-    t6 = (
-      <div>
-        {t4}
-        {t5}
-      </div>
-    );
-    $[9] = t4;
-    $[10] = t5;
-    $[11] = t6;
-  } else {
-    t6 = $[11];
-  }
-  return t6;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ firstName: "John" }],
-};
-
-```
-
-## 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\nProps: [firstName]\nState: [lastName]\n\nData Flow Tree:\n├── firstName (Prop)\n└── lastName (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":11,"column":4,"index":297},"end":{"line":11,"column":15,"index":308},"filename":"derived-state-from-prop-local-state-and-component-scope.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":20,"column":1,"index":542},"filename":"derived-state-from-prop-local-state-and-component-scope.ts"},"fnName":"Component","memoSlots":12,"memoBlocks":5,"memoValues":6,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div><input value="Doe"><div>John D. Doe</div></div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({initialName}) {
@@ -29,7 +29,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 import { useEffect, useState } from "react";
 
 function Component(t0) {
@@ -79,12 +79,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":16,"column":1,"index":359},"filename":"derived-state-from-prop-setter-call-outside-effect-no-error.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":3,"memoValues":4,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: ok) <div><input value="John"></div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({initialName}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-ternary.expect.md

@@ -1,57 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp
-
-function Component({value}) {
-  const [checked, setChecked] = useState('');
-
-  useEffect(() => {
-    setChecked(value === '' ? [] : value.split(','));
-  }, [value]);
-
-  return <div>{checked}</div>;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
-
-function Component(t0) {
-  const $ = _c(5);
-  const { value } = t0;
-  const [checked, setChecked] = useState("");
-  let t1;
-  let t2;
-  if ($[0] !== value) {
-    t1 = () => {
-      setChecked(value === "" ? [] : value.split(","));
-    };
-    t2 = [value];
-    $[0] = value;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t1 = $[1];
-    t2 = $[2];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[3] !== checked) {
-    t3 = <div>{checked}</div>;
-    $[3] = checked;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  return t3;
-}
-
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function MockComponent({onSet}) {
@@ -28,7 +28,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 import { useEffect, useState } from "react";
 
 function MockComponent(t0) {
@@ -80,13 +80,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":6,"column":1,"index":211},"filename":"derived-state-from-prop-setter-used-outside-effect-no-error.ts"},"fnName":"MockComponent","memoSlots":2,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":8,"column":0,"index":213},"end":{"line":15,"column":1,"index":402},"filename":"derived-state-from-prop-setter-used-outside-effect-no-error.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: ok) <div>Mock Component</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function MockComponent({onSet}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-with-side-effect.expect.md

@@ -1,78 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({value}) {
-  const [localValue, setLocalValue] = useState('');
-
-  useEffect(() => {
-    setLocalValue(value);
-    document.title = `Value: ${value}`;
-  }, [value]);
-
-  return <div>{localValue}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 'test'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-function Component(t0) {
-  const $ = _c(5);
-  const { value } = t0;
-  const [localValue, setLocalValue] = useState("");
-  let t1;
-  let t2;
-  if ($[0] !== value) {
-    t1 = () => {
-      setLocalValue(value);
-      document.title = `Value: ${value}`;
-    };
-    t2 = [value];
-    $[0] = value;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t1 = $[1];
-    t2 = $[2];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[3] !== localValue) {
-    t3 = <div>{localValue}</div>;
-    $[3] = localValue;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  return t3;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ value: "test" }],
-};
-
-```
-
-## 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\nProps: [value]\n\nData Flow Tree:\n└── value (Prop)\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":8,"column":4,"index":214},"end":{"line":8,"column":17,"index":227},"filename":"derived-state-from-prop-with-side-effect.ts","identifierName":"setLocalValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":13,"column":1,"index":327},"filename":"derived-state-from-prop-with-side-effect.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>test</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState, useRef} from 'react';
 
 export default function Component({test}) {
@@ -27,7 +27,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 import { useEffect, useState, useRef } from "react";
 
 export default function Component(t0) {
@@ -68,12 +68,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":130},"end":{"line":14,"column":1,"index":328},"filename":"derived-state-from-ref-and-state-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: ok) nulltestString

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState, useRef} from 'react';
 
 export default function Component({test}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-local-function-call.expect.md

@@ -1,93 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({propValue}) {
-  const [value, setValue] = useState(null);
-
-  function localFunction() {
-    console.log('local function');
-  }
-
-  useEffect(() => {
-    setValue(propValue);
-    localFunction();
-  }, [propValue]);
-
-  return <div>{value}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{propValue: 'test'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-function Component(t0) {
-  const $ = _c(6);
-  const { propValue } = t0;
-  const [value, setValue] = useState(null);
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = function localFunction() {
-      console.log("local function");
-    };
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  const localFunction = t1;
-  let t2;
-  let t3;
-  if ($[1] !== propValue) {
-    t2 = () => {
-      setValue(propValue);
-      localFunction();
-    };
-    t3 = [propValue];
-    $[1] = propValue;
-    $[2] = t2;
-    $[3] = t3;
-  } else {
-    t2 = $[2];
-    t3 = $[3];
-  }
-  useEffect(t2, t3);
-  let t4;
-  if ($[4] !== value) {
-    t4 = <div>{value}</div>;
-    $[4] = value;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  return t4;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ propValue: "test" }],
-};
-
-```
-
-## 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\nProps: [propValue]\n\nData Flow Tree:\n└── propValue (Prop)\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":12,"column":4,"index":279},"end":{"line":12,"column":12,"index":287},"filename":"effect-contains-local-function-call.ts","identifierName":"setValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":17,"column":1,"index":371},"filename":"effect-contains-local-function-call.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":3,"memoValues":4,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>test</div>
-logs: ['local function']

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({propValue, onChange}) {
@@ -25,7 +25,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 import { useEffect, useState } from "react";
 
 function Component(t0) {
@@ -70,13 +70,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":12,"column":1,"index":306},"filename":"effect-contains-prop-function-call-no-error.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":16,"column":41,"index":402},"end":{"line":16,"column":49,"index":410},"filename":"effect-contains-prop-function-call-no-error.ts"},"fnName":null,"memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: ok) <div>test</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({propValue, onChange}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-used-in-dep-array-still-errors.expect.md

@@ -1,63 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component({prop}) {
-  const [s, setS] = useState(0);
-  useEffect(() => {
-    setS(prop);
-  }, [prop, setS]);
-
-  return <div>{prop}</div>;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component(t0) {
-  const $ = _c(5);
-  const { prop } = t0;
-  const [, setS] = useState(0);
-  let t1;
-  let t2;
-  if ($[0] !== prop) {
-    t1 = () => {
-      setS(prop);
-    };
-    t2 = [prop, setS];
-    $[0] = prop;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t1 = $[1];
-    t2 = $[2];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[3] !== prop) {
-    t3 = <div>{prop}</div>;
-    $[3] = prop;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  return t3;
-}
-
-```
-
-## 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\nProps: [prop]\n\nData Flow Tree:\n└── prop (Prop)\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":6,"column":4,"index":150},"end":{"line":6,"column":8,"index":154},"filename":"effect-used-in-dep-array-still-errors.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":10,"column":1,"index":212},"filename":"effect-used-in-dep-array-still-errors.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-used-in-dep-array-still-errors.js

@@ -1,10 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component({prop}) {
-  const [s, setS] = useState(0);
-  useEffect(() => {
-    setS(prop);
-  }, [prop, setS]);
-
-  return <div>{prop}</div>;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-cleanup-function-depending-on-derived-computation-value.expect.md

@@ -1,76 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-import {useEffect, useState} from 'react';
-
-function Component(file: File) {
-  const [imageUrl, setImageUrl] = useState(null);
-
-  /*
-   * Cleaning up the variable or a source of the variable used to setState
-   * inside the effect communicates that we always need to clean up something
-   * which is a valid use case for useEffect. In which case we want to
-   * avoid an throwing
-   */
-  useEffect(() => {
-    const imageUrlPrepared = URL.createObjectURL(file);
-    setImageUrl(imageUrlPrepared);
-    return () => URL.revokeObjectURL(imageUrlPrepared);
-  }, [file]);
-
-  return <Image src={imageUrl} xstyle={styles.imageSizeLimits} />;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-import { useEffect, useState } from "react";
-
-function Component(file) {
-  const $ = _c(5);
-  const [imageUrl, setImageUrl] = useState(null);
-  let t0;
-  let t1;
-  if ($[0] !== file) {
-    t0 = () => {
-      const imageUrlPrepared = URL.createObjectURL(file);
-      setImageUrl(imageUrlPrepared);
-      return () => URL.revokeObjectURL(imageUrlPrepared);
-    };
-    t1 = [file];
-    $[0] = file;
-    $[1] = t0;
-    $[2] = t1;
-  } else {
-    t0 = $[1];
-    t1 = $[2];
-  }
-  useEffect(t0, t1);
-  let t2;
-  if ($[3] !== imageUrl) {
-    t2 = <Image src={imageUrl} xstyle={styles.imageSizeLimits} />;
-    $[3] = imageUrl;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  return t2;
-}
-
-```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":108},"end":{"line":21,"column":1,"index":700},"filename":"effect-with-cleanup-function-depending-on-derived-computation-value.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-cleanup-function-depending-on-derived-computation-value.js

@@ -1,21 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-import {useEffect, useState} from 'react';
-
-function Component(file: File) {
-  const [imageUrl, setImageUrl] = useState(null);
-
-  /*
-   * Cleaning up the variable or a source of the variable used to setState
-   * inside the effect communicates that we always need to clean up something
-   * which is a valid use case for useEffect. In which case we want to
-   * avoid an throwing
-   */
-  useEffect(() => {
-    const imageUrlPrepared = URL.createObjectURL(file);
-    setImageUrl(imageUrlPrepared);
-    return () => URL.revokeObjectURL(imageUrlPrepared);
-  }, [file]);
-
-  return <Image src={imageUrl} xstyle={styles.imageSizeLimits} />;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({propValue}) {
@@ -25,7 +25,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 import { useEffect, useState } from "react";
 
 function Component(t0) {
@@ -65,12 +65,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":12,"column":1,"index":298},"filename":"effect-with-global-function-call-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: exception) globalCall is not defined

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({propValue}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.expect.md

@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component({value, enabled}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    if (enabled) {
+      setLocalValue(value);
+    } else {
+      setLocalValue('disabled');
+    }
+  }, [value, enabled]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'test', enabled: true}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [value]
+
+Data Flow Tree:
+└── value (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
+
+error.derived-state-conditionally-in-effect.ts:9:6
+   7 |   useEffect(() => {
+   8 |     if (enabled) {
+>  9 |       setLocalValue(value);
+     |       ^^^^^^^^^^^^^ This should be computed during render, not in an effect
+  10 |     } else {
+  11 |       setLocalValue('disabled');
+  12 |     }
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-conditionally-in-effect.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({value, enabled}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.expect.md

@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+export default function Component({input = 'empty'}) {
+  const [currInput, setCurrInput] = useState(input);
+  const localConst = 'local const';
+
+  useEffect(() => {
+    setCurrInput(input + localConst);
+  }, [input, localConst]);
+
+  return <div>{currInput}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{input: 'test'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [input]
+
+Data Flow Tree:
+└── input (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
+
+error.derived-state-from-default-props.ts:9:4
+   7 |
+   8 |   useEffect(() => {
+>  9 |     setCurrInput(input + localConst);
+     |     ^^^^^^^^^^^^ This should be computed during render, not in an effect
+  10 |   }, [input, localConst]);
+  11 |
+  12 |   return <div>{currInput}</div>;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-default-props.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 export default function Component({input = 'empty'}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.expect.md

@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+
+import {useEffect, useState} from 'react';
+
+function Component({shouldChange}) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (shouldChange) {
+      setCount(count + 1);
+    }
+  }, [count]);
+
+  return <div>{count}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+State: [count]
+
+Data Flow Tree:
+└── count (State)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
+
+error.derived-state-from-local-state-in-effect.ts:10:6
+   8 |   useEffect(() => {
+   9 |     if (shouldChange) {
+> 10 |       setCount(count + 1);
+     |       ^^^^^^^^ This should be computed during render, not in an effect
+  11 |     }
+  12 |   }, [count]);
+  13 |
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-local-state-in-effect.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 
 import {useEffect, useState} from 'react';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.expect.md

@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component({firstName}) {
+  const [lastName, setLastName] = useState('Doe');
+  const [fullName, setFullName] = useState('John');
+
+  const middleName = 'D.';
+
+  useEffect(() => {
+    setFullName(firstName + ' ' + middleName + ' ' + lastName);
+  }, [firstName, middleName, lastName]);
+
+  return (
+    <div>
+      <input value={lastName} onChange={e => setLastName(e.target.value)} />
+      <div>{fullName}</div>
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{firstName: 'John'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [firstName]
+State: [lastName]
+
+Data Flow Tree:
+├── firstName (Prop)
+└── lastName (State)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
+
+error.derived-state-from-prop-local-state-and-component-scope.ts:11:4
+   9 |
+  10 |   useEffect(() => {
+> 11 |     setFullName(firstName + ' ' + middleName + ' ' + lastName);
+     |     ^^^^^^^^^^^ This should be computed during render, not in an effect
+  12 |   }, [firstName, middleName, lastName]);
+  13 |
+  14 |   return (
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-local-state-and-component-scope.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({firstName}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-setter-ternary.expect.md

@@ -0,0 +1,48 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+
+function Component({value}) {
+  const [checked, setChecked] = useState('');
+
+  useEffect(() => {
+    setChecked(value === '' ? [] : value.split(','));
+  }, [value]);
+
+  return <div>{checked}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [value]
+
+Data Flow Tree:
+└── value (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
+
+error.derived-state-from-prop-setter-ternary.ts:7:4
+   5 |
+   6 |   useEffect(() => {
+>  7 |     setChecked(value === '' ? [] : value.split(','));
+     |     ^^^^^^^^^^ This should be computed during render, not in an effect
+   8 |   }, [value]);
+   9 |
+  10 |   return <div>{checked}</div>;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.expect.md

@@ -0,0 +1,55 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component({value}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    setLocalValue(value);
+    document.title = `Value: ${value}`;
+  }, [value]);
+
+  return <div>{localValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'test'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [value]
+
+Data Flow Tree:
+└── value (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
+
+error.derived-state-from-prop-with-side-effect.ts:8:4
+   6 |
+   7 |   useEffect(() => {
+>  8 |     setLocalValue(value);
+     |     ^^^^^^^^^^^^^ This should be computed during render, not in an effect
+   9 |     document.title = `Value: ${value}`;
+  10 |   }, [value]);
+  11 |
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.derived-state-from-prop-with-side-effect.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({value}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.expect.md

@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component({propValue}) {
+  const [value, setValue] = useState(null);
+
+  function localFunction() {
+    console.log('local function');
+  }
+
+  useEffect(() => {
+    setValue(propValue);
+    localFunction();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [propValue]
+
+Data Flow Tree:
+└── propValue (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
+
+error.effect-contains-local-function-call.ts:12:4
+  10 |
+  11 |   useEffect(() => {
+> 12 |     setValue(propValue);
+     |     ^^^^^^^^ This should be computed during render, not in an effect
+  13 |     localFunction();
+  14 |   }, [propValue]);
+  15 |
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.effect-contains-local-function-call.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component({propValue}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.expect.md

@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [firstName, setFirstName] = useState('Taylor');
+  const lastName = 'Swift';
+
+  // 🔴 Avoid: redundant state and unnecessary Effect
+  const [fullName, setFullName] = useState('');
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+State: [firstName]
+
+Data Flow Tree:
+└── firstName (State)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
+
+error.invalid-derived-computation-in-effect.ts:11:4
+   9 |   const [fullName, setFullName] = useState('');
+  10 |   useEffect(() => {
+> 11 |     setFullName(firstName + ' ' + lastName);
+     |     ^^^^^^^^^^^ This should be computed during render, not in an effect
+  12 |   }, [firstName, lastName]);
+  13 |
+  14 |   return <div>{fullName}</div>;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-computation-in-effect.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 function Component() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.expect.md

@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+export default function Component(props) {
+  const [displayValue, setDisplayValue] = useState('');
+
+  useEffect(() => {
+    const computed = props.prefix + props.value + props.suffix;
+    setDisplayValue(computed);
+  }, [props.prefix, props.value, props.suffix]);
+
+  return <div>{displayValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{prefix: '[', value: 'test', suffix: ']'}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [props]
+
+Data Flow Tree:
+└── computed
+    └── props (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
+
+error.invalid-derived-state-from-computed-props.ts:9:4
+   7 |   useEffect(() => {
+   8 |     const computed = props.prefix + props.value + props.suffix;
+>  9 |     setDisplayValue(computed);
+     |     ^^^^^^^^^^^^^^^ This should be computed during render, not in an effect
+  10 |   }, [props.prefix, props.value, props.suffix]);
+  11 |
+  12 |   return <div>{displayValue}</div>;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-computed-props.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 export default function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.expect.md

@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+export default function Component({props}) {
+  const [fullName, setFullName] = useState(
+    props.firstName + ' ' + props.lastName
+  );
+
+  useEffect(() => {
+    setFullName(props.firstName + ' ' + props.lastName);
+  }, [props.firstName, props.lastName]);
+
+  return <div>{fullName}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{props: {firstName: 'John', lastName: 'Doe'}}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: You might not need an effect. Derive values in render, not effects.
+
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [props]
+
+Data Flow Tree:
+└── props (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
+
+error.invalid-derived-state-from-destructured-props.ts:10:4
+   8 |
+   9 |   useEffect(() => {
+> 10 |     setFullName(props.firstName + ' ' + props.lastName);
+     |     ^^^^^^^^^^^ This should be computed during render, not in an effect
+  11 |   }, [props.firstName, props.lastName]);
+  12 |
+  13 |   return <div>{fullName}</div>;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/error.invalid-derived-state-from-destructured-props.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState} from 'react';
 
 export default function Component({props}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/from-props-setstate-in-effect-no-error.expect.md

@@ -1,65 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly
-
-function Component({setParentState, prop}) {
-  useEffect(() => {
-    setParentState(prop);
-  }, [prop]);
-
-  return <div>{prop}</div>;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly
-
-function Component(t0) {
-  const $ = _c(7);
-  const { setParentState, prop } = t0;
-  let t1;
-  if ($[0] !== prop || $[1] !== setParentState) {
-    t1 = () => {
-      setParentState(prop);
-    };
-    $[0] = prop;
-    $[1] = setParentState;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  let t2;
-  if ($[3] !== prop) {
-    t2 = [prop];
-    $[3] = prop;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[5] !== prop) {
-    t3 = <div>{prop}</div>;
-    $[5] = prop;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  return t3;
-}
-
-```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":105},"end":{"line":9,"column":1,"index":240},"filename":"from-props-setstate-in-effect-no-error.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/from-props-setstate-in-effect-no-error.js

@@ -1,9 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly
-
-function Component({setParentState, prop}) {
-  useEffect(() => {
-    setParentState(prop);
-  }, [prop]);
-
-  return <div>{prop}</div>;
-}

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

@@ -1,115 +0,0 @@
-
-## 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

@@ -1,32 +0,0 @@
-// @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/invalid-derived-computation-in-effect.expect.md

@@ -1,80 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component() {
-  const [firstName, setFirstName] = useState('Taylor');
-  const lastName = 'Swift';
-
-  // 🔴 Avoid: redundant state and unnecessary Effect
-  const [fullName, setFullName] = useState('');
-  useEffect(() => {
-    setFullName(firstName + ' ' + lastName);
-  }, [firstName, lastName]);
-
-  return <div>{fullName}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-function Component() {
-  const $ = _c(5);
-  const [firstName] = useState("Taylor");
-
-  const [fullName, setFullName] = useState("");
-  let t0;
-  let t1;
-  if ($[0] !== firstName) {
-    t0 = () => {
-      setFullName(firstName + " " + "Swift");
-    };
-    t1 = [firstName, "Swift"];
-    $[0] = firstName;
-    $[1] = t0;
-    $[2] = t1;
-  } else {
-    t0 = $[1];
-    t1 = $[2];
-  }
-  useEffect(t0, t1);
-  let t2;
-  if ($[3] !== fullName) {
-    t2 = <div>{fullName}</div>;
-    $[3] = fullName;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  return t2;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};
-
-```
-
-## 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: [firstName]\n\nData Flow Tree:\n└── firstName (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":11,"column":4,"index":341},"end":{"line":11,"column":15,"index":352},"filename":"invalid-derived-computation-in-effect.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":15,"column":1,"index":445},"filename":"invalid-derived-computation-in-effect.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>Taylor Swift</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-computed-props.expect.md

@@ -1,79 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-export default function Component(props) {
-  const [displayValue, setDisplayValue] = useState('');
-
-  useEffect(() => {
-    const computed = props.prefix + props.value + props.suffix;
-    setDisplayValue(computed);
-  }, [props.prefix, props.value, props.suffix]);
-
-  return <div>{displayValue}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{prefix: '[', value: 'test', suffix: ']'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-export default function Component(props) {
-  const $ = _c(7);
-  const [displayValue, setDisplayValue] = useState("");
-  let t0;
-  let t1;
-  if ($[0] !== props.prefix || $[1] !== props.suffix || $[2] !== props.value) {
-    t0 = () => {
-      const computed = props.prefix + props.value + props.suffix;
-      setDisplayValue(computed);
-    };
-    t1 = [props.prefix, props.value, props.suffix];
-    $[0] = props.prefix;
-    $[1] = props.suffix;
-    $[2] = props.value;
-    $[3] = t0;
-    $[4] = t1;
-  } else {
-    t0 = $[3];
-    t1 = $[4];
-  }
-  useEffect(t0, t1);
-  let t2;
-  if ($[5] !== displayValue) {
-    t2 = <div>{displayValue}</div>;
-    $[5] = displayValue;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  return t2;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ prefix: "[", value: "test", suffix: "]" }],
-};
-
-```
-
-## 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\nProps: [props]\n\nData Flow Tree:\n└── computed\n    └── props (Prop)\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":9,"column":4,"index":295},"end":{"line":9,"column":19,"index":310},"filename":"invalid-derived-state-from-computed-props.ts","identifierName":"setDisplayValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":122},"end":{"line":13,"column":1,"index":409},"filename":"invalid-derived-state-from-computed-props.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>[test]</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.expect.md

@@ -1,81 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-export default function Component({props}) {
-  const [fullName, setFullName] = useState(
-    props.firstName + ' ' + props.lastName
-  );
-
-  useEffect(() => {
-    setFullName(props.firstName + ' ' + props.lastName);
-  }, [props.firstName, props.lastName]);
-
-  return <div>{fullName}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{props: {firstName: 'John', lastName: 'Doe'}}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import { useEffect, useState } from "react";
-
-export default function Component(t0) {
-  const $ = _c(6);
-  const { props } = t0;
-  const [fullName, setFullName] = useState(
-    props.firstName + " " + props.lastName,
-  );
-  let t1;
-  let t2;
-  if ($[0] !== props.firstName || $[1] !== props.lastName) {
-    t1 = () => {
-      setFullName(props.firstName + " " + props.lastName);
-    };
-    t2 = [props.firstName, props.lastName];
-    $[0] = props.firstName;
-    $[1] = props.lastName;
-    $[2] = t1;
-    $[3] = t2;
-  } else {
-    t1 = $[2];
-    t2 = $[3];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[4] !== fullName) {
-    t3 = <div>{fullName}</div>;
-    $[4] = fullName;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  return t3;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ props: { firstName: "John", lastName: "Doe" } }],
-};
-
-```
-
-## 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\nProps: [props]\n\nData Flow Tree:\n└── props (Prop)\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":10,"column":4,"index":269},"end":{"line":10,"column":15,"index":280},"filename":"invalid-derived-state-from-destructured-props.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":122},"end":{"line":14,"column":1,"index":397},"filename":"invalid-derived-state-from-destructured-props.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) <div>John Doe</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState, useRef} from 'react';
 
 export default function Component({test}) {
@@ -31,7 +31,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 import { useEffect, useState, useRef } from "react";
 
 export default function Component(t0) {
@@ -77,12 +77,6 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":130},"end":{"line":18,"column":1,"index":386},"filename":"ref-conditional-in-effect-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: ok) 8

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 import {useEffect, useState, useRef} from 'react';
 
 export default function Component({test}) {

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

@@ -1,71 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component({prop}) {
-  const [s, setS] = useState();
-  const [second, setSecond] = useState(prop);
-
-  /*
-   * `second` is a source of state. It will inherit the value of `prop` in
-   * the first render, but after that it will no longer be updated when
-   * `prop` changes. So we shouldn't consider `second` as being derived from
-   * `prop`
-   */
-  useEffect(() => {
-    setS(second);
-  }, [second]);
-
-  return <div>{s}</div>;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component(t0) {
-  const $ = _c(5);
-  const { prop } = t0;
-  const [s, setS] = useState();
-  const [second] = useState(prop);
-  let t1;
-  let t2;
-  if ($[0] !== second) {
-    t1 = () => {
-      setS(second);
-    };
-    t2 = [second];
-    $[0] = second;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t1 = $[1];
-    t2 = $[2];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[3] !== s) {
-    t3 = <div>{s}</div>;
-    $[3] = s;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  return t3;
-}
-
-```
-
-## Logs
-
-```
-{"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}
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

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

@@ -1,18 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component({prop}) {
-  const [s, setS] = useState();
-  const [second, setSecond] = useState(prop);
-
-  /*
-   * `second` is a source of state. It will inherit the value of `prop` in
-   * the first render, but after that it will no longer be updated when
-   * `prop` changes. So we shouldn't consider `second` as being derived from
-   * `prop`
-   */
-  useEffect(() => {
-    setS(second);
-  }, [second]);
-
-  return <div>{s}</div>;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.expect.md

@@ -1,69 +0,0 @@
-
-## Input
-
-```javascript
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates a custom component wrapper
-function CustomForm({onSubmit, children}: any) {
-  return <form onSubmit={onSubmit}>{children}</form>;
-}
-
-// Simulates react-hook-form's handleSubmit
-function handleSubmit<T>(callback: (data: T) => void) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-function Component() {
-  const ref = useRef<HTMLInputElement>(null);
-
-  const onSubmit = (data: any) => {
-    // This should error: passing function with ref access to custom component
-    // event handler, even though it would be safe on a native <form>
-    if (ref.current !== null) {
-      console.log(ref.current.value);
-    }
-  };
-
-  return (
-    <>
-      <input ref={ref} />
-      <CustomForm onSubmit={handleSubmit(onSubmit)}>
-        <button type="submit">Submit</button>
-      </CustomForm>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.ref-value-in-custom-component-event-handler-wrapper.ts:31:41
-  29 |     <>
-  30 |       <input ref={ref} />
-> 31 |       <CustomForm onSubmit={handleSubmit(onSubmit)}>
-     |                                          ^^^^^^^^ Passing a ref to a function may read its value during render
-  32 |         <button type="submit">Submit</button>
-  33 |       </CustomForm>
-  34 |     </>
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.tsx

@@ -1,41 +0,0 @@
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates a custom component wrapper
-function CustomForm({onSubmit, children}: any) {
-  return <form onSubmit={onSubmit}>{children}</form>;
-}
-
-// Simulates react-hook-form's handleSubmit
-function handleSubmit<T>(callback: (data: T) => void) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-function Component() {
-  const ref = useRef<HTMLInputElement>(null);
-
-  const onSubmit = (data: any) => {
-    // This should error: passing function with ref access to custom component
-    // event handler, even though it would be safe on a native <form>
-    if (ref.current !== null) {
-      console.log(ref.current.value);
-    }
-  };
-
-  return (
-    <>
-      <input ref={ref} />
-      <CustomForm onSubmit={handleSubmit(onSubmit)}>
-        <button type="submit">Submit</button>
-      </CustomForm>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.expect.md

@@ -1,55 +0,0 @@
-
-## Input
-
-```javascript
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates a handler wrapper
-function handleClick(value: any) {
-  return () => {
-    console.log(value);
-  };
-}
-
-function Component() {
-  const ref = useRef(null);
-
-  // This should still error: passing ref.current directly to a wrapper
-  // The ref value is accessed during render, not in the event handler
-  return (
-    <>
-      <input ref={ref} />
-      <button onClick={handleClick(ref.current)}>Click</button>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.ref-value-in-event-handler-wrapper.ts:19:35
-  17 |     <>
-  18 |       <input ref={ref} />
-> 19 |       <button onClick={handleClick(ref.current)}>Click</button>
-     |                                    ^^^^^^^^^^^ Cannot access ref value during render
-  20 |     </>
-  21 |   );
-  22 | }
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.tsx

@@ -1,27 +0,0 @@
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates a handler wrapper
-function handleClick(value: any) {
-  return () => {
-    console.log(value);
-  };
-}
-
-function Component() {
-  const ref = useRef(null);
-
-  // This should still error: passing ref.current directly to a wrapper
-  // The ref value is accessed during render, not in the event handler
-  return (
-    <>
-      <input ref={ref} />
-      <button onClick={handleClick(ref.current)}>Click</button>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.expect.md

@@ -1,224 +0,0 @@
-
-## Input
-
-```javascript
-// @validateSourceLocations
-import {useEffect, useCallback} from 'react';
-
-function Component({prop1, prop2}) {
-  const x = prop1 + prop2;
-  const y = x * 2;
-  const arr = [x, y];
-  const obj = {x, y};
-  const [a, b] = arr;
-  const {x: c, y: d} = obj;
-
-  useEffect(() => {
-    if (a > 10) {
-      console.log(a);
-    }
-  }, [a]);
-
-  const foo = useCallback(() => {
-    return a + b;
-  }, [a, b]);
-
-  function bar() {
-    return (c + d) * 2;
-  }
-
-  console.log('Hello, world!');
-
-  return [y, foo, bar];
-}
-
-```
-
-
-## Error
-
-```
-Found 13 errors:
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:5:8
-  3 |
-  4 | function Component({prop1, prop2}) {
-> 5 |   const x = prop1 + prop2;
-    |         ^^^^^^^^^^^^^^^^^
-  6 |   const y = x * 2;
-  7 |   const arr = [x, y];
-  8 |   const obj = {x, y};
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:6:8
-  4 | function Component({prop1, prop2}) {
-  5 |   const x = prop1 + prop2;
-> 6 |   const y = x * 2;
-    |         ^^^^^^^^^
-  7 |   const arr = [x, y];
-  8 |   const obj = {x, y};
-  9 |   const [a, b] = arr;
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:7:8
-   5 |   const x = prop1 + prop2;
-   6 |   const y = x * 2;
->  7 |   const arr = [x, y];
-     |         ^^^^^^^^^^^^
-   8 |   const obj = {x, y};
-   9 |   const [a, b] = arr;
-  10 |   const {x: c, y: d} = obj;
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:8:8
-   6 |   const y = x * 2;
-   7 |   const arr = [x, y];
->  8 |   const obj = {x, y};
-     |         ^^^^^^^^^^^^
-   9 |   const [a, b] = arr;
-  10 |   const {x: c, y: d} = obj;
-  11 |
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:9:8
-   7 |   const arr = [x, y];
-   8 |   const obj = {x, y};
->  9 |   const [a, b] = arr;
-     |         ^^^^^^^^^^^^
-  10 |   const {x: c, y: d} = obj;
-  11 |
-  12 |   useEffect(() => {
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:10:8
-   8 |   const obj = {x, y};
-   9 |   const [a, b] = arr;
-> 10 |   const {x: c, y: d} = obj;
-     |         ^^^^^^^^^^^^^^^^^^
-  11 |
-  12 |   useEffect(() => {
-  13 |     if (a > 10) {
-
-Todo: Important source location missing in generated code
-
-Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:12:2
-  10 |   const {x: c, y: d} = obj;
-  11 |
-> 12 |   useEffect(() => {
-     |   ^^^^^^^^^^^^^^^^^
-> 13 |     if (a > 10) {
-     | ^^^^^^^^^^^^^^^^^
-> 14 |       console.log(a);
-     | ^^^^^^^^^^^^^^^^^
-> 15 |     }
-     | ^^^^^^^^^^^^^^^^^
-> 16 |   }, [a]);
-     | ^^^^^^^^^^^
-  17 |
-  18 |   const foo = useCallback(() => {
-  19 |     return a + b;
-
-Todo: Important source location missing in generated code
-
-Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:14:6
-  12 |   useEffect(() => {
-  13 |     if (a > 10) {
-> 14 |       console.log(a);
-     |       ^^^^^^^^^^^^^^^
-  15 |     }
-  16 |   }, [a]);
-  17 |
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:18:8
-  16 |   }, [a]);
-  17 |
-> 18 |   const foo = useCallback(() => {
-     |         ^^^^^^^^^^^^^^^^^^^^^^^^^
-> 19 |     return a + b;
-     | ^^^^^^^^^^^^^^^^^
-> 20 |   }, [a, b]);
-     | ^^^^^^^^^^^^^
-  21 |
-  22 |   function bar() {
-  23 |     return (c + d) * 2;
-
-Todo: Important source location missing in generated code
-
-Source location for ReturnStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:19:4
-  17 |
-  18 |   const foo = useCallback(() => {
-> 19 |     return a + b;
-     |     ^^^^^^^^^^^^^
-  20 |   }, [a, b]);
-  21 |
-  22 |   function bar() {
-
-Todo: Important source location missing in generated code
-
-Source location for ReturnStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:23:4
-  21 |
-  22 |   function bar() {
-> 23 |     return (c + d) * 2;
-     |     ^^^^^^^^^^^^^^^^^^^
-  24 |   }
-  25 |
-  26 |   console.log('Hello, world!');
-
-Todo: Important source location missing in generated code
-
-Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:26:2
-  24 |   }
-  25 |
-> 26 |   console.log('Hello, world!');
-     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-  27 |
-  28 |   return [y, foo, bar];
-  29 | }
-
-Todo: Important source location missing in generated code
-
-Source location for ReturnStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:28:2
-  26 |   console.log('Hello, world!');
-  27 |
-> 28 |   return [y, foo, bar];
-     |   ^^^^^^^^^^^^^^^^^^^^^
-  29 | }
-  30 |
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.js

@@ -1,29 +0,0 @@
-// @validateSourceLocations
-import {useEffect, useCallback} from 'react';
-
-function Component({prop1, prop2}) {
-  const x = prop1 + prop2;
-  const y = x * 2;
-  const arr = [x, y];
-  const obj = {x, y};
-  const [a, b] = arr;
-  const {x: c, y: d} = obj;
-
-  useEffect(() => {
-    if (a > 10) {
-      console.log(a);
-    }
-  }, [a]);
-
-  const foo = useCallback(() => {
-    return a + b;
-  }, [a, b]);
-
-  function bar() {
-    return (c + d) * 2;
-  }
-
-  console.log('Hello, world!');
-
-  return [y, foo, bar];
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-destructure-from-prop-with-default-value.expect.md

@@ -1,45 +0,0 @@
-
-## Input
-
-```javascript
-export function useFormatRelativeTime(opts = {}) {
-  const {timeZone, minimal} = opts;
-  const format = useCallback(function formatWithUnit() {}, [minimal]);
-  // We previously recorded `{timeZone}` as capturing timeZone into the object,
-  // then assumed that dateTimeFormat() mutates that object,
-  // which in turn could mutate timeZone and the object it came from,
-  // which meanteans that the value `minimal` is derived from can change.
-  //
-  // The fix was to record a Capture from a maybefrozen value as an ImmutableCapture
-  // which doesn't propagate mutations
-  dateTimeFormat({timeZone});
-  return format;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime";
-export function useFormatRelativeTime(t0) {
-  const $ = _c(1);
-  const opts = t0 === undefined ? {} : t0;
-  const { timeZone, minimal } = opts;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = function formatWithUnit() {};
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  const format = t1;
-
-  dateTimeFormat({ timeZone });
-  return format;
-}
-
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/repro-destructure-from-prop-with-default-value.js

@@ -1,13 +0,0 @@
-export function useFormatRelativeTime(opts = {}) {
-  const {timeZone, minimal} = opts;
-  const format = useCallback(function formatWithUnit() {}, [minimal]);
-  // We previously recorded `{timeZone}` as capturing timeZone into the object,
-  // then assumed that dateTimeFormat() mutates that object,
-  // which in turn could mutate timeZone and the object it came from,
-  // which meanteans that the value `minimal` is derived from can change.
-  //
-  // The fix was to record a Capture from a maybefrozen value as an ImmutableCapture
-  // which doesn't propagate mutations
-  dateTimeFormat({timeZone});
-  return format;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-callback-stable-built-ins.expect.md

@@ -1,91 +0,0 @@
-
-## Input
-
-```javascript
-// @validatePreserveExistingMemoizationGuarantees
-import {
-  useCallback,
-  useTransition,
-  useState,
-  useOptimistic,
-  useActionState,
-  useRef,
-  useReducer,
-} from 'react';
-
-function useFoo() {
-  const [s, setState] = useState();
-  const ref = useRef(null);
-  const [t, startTransition] = useTransition();
-  const [u, addOptimistic] = useOptimistic();
-  const [v, dispatch] = useReducer(() => {}, null);
-  const [isPending, dispatchAction] = useActionState(() => {}, null);
-
-  return useCallback(() => {
-    dispatch();
-    startTransition(() => {});
-    addOptimistic();
-    setState(null);
-    dispatchAction();
-    ref.current = true;
-  }, []);
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useFoo,
-  params: [],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
-import {
-  useCallback,
-  useTransition,
-  useState,
-  useOptimistic,
-  useActionState,
-  useRef,
-  useReducer,
-} from "react";
-
-function useFoo() {
-  const $ = _c(1);
-  const [, setState] = useState();
-  const ref = useRef(null);
-  const [, startTransition] = useTransition();
-  const [, addOptimistic] = useOptimistic();
-  const [, dispatch] = useReducer(_temp, null);
-  const [, dispatchAction] = useActionState(_temp2, null);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
-      dispatch();
-      startTransition(_temp3);
-      addOptimistic();
-      setState(null);
-      dispatchAction();
-      ref.current = true;
-    };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}
-function _temp3() {}
-function _temp2() {}
-function _temp() {}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useFoo,
-  params: [],
-};
-
-```
-      
-### Eval output
-(kind: ok) "[[ function params=0 ]]"

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/preserve-use-callback-stable-built-ins.ts

@@ -1,33 +0,0 @@
-// @validatePreserveExistingMemoizationGuarantees
-import {
-  useCallback,
-  useTransition,
-  useState,
-  useOptimistic,
-  useActionState,
-  useRef,
-  useReducer,
-} from 'react';
-
-function useFoo() {
-  const [s, setState] = useState();
-  const ref = useRef(null);
-  const [t, startTransition] = useTransition();
-  const [u, addOptimistic] = useOptimistic();
-  const [v, dispatch] = useReducer(() => {}, null);
-  const [isPending, dispatchAction] = useActionState(() => {}, null);
-
-  return useCallback(() => {
-    dispatch();
-    startTransition(() => {});
-    addOptimistic();
-    setState(null);
-    dispatchAction();
-    ref.current = true;
-  }, []);
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useFoo,
-  params: [],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-destructuring-reassignment-undefined-variable.expect.md

@@ -1,162 +0,0 @@
-
-## Input
-
-```javascript
-// @flow @compilationMode:"infer"
-'use strict';
-
-function getWeekendDays(user) {
-  return [0, 6];
-}
-
-function getConfig(weekendDays) {
-  return [1, 5];
-}
-
-component Calendar(user, defaultFirstDay, currentDate, view) {
-  const weekendDays = getWeekendDays(user);
-  let firstDay = defaultFirstDay;
-  let daysToDisplay = 7;
-  if (view === 'week') {
-    let lastDay;
-    // this assignment produces invalid code
-    [firstDay, lastDay] = getConfig(weekendDays);
-    daysToDisplay = ((7 + lastDay - firstDay) % 7) + 1;
-  } else if (view === 'day') {
-    firstDay = currentDate.getDayOfWeek();
-    daysToDisplay = 1;
-  }
-
-  return [currentDate, firstDay, daysToDisplay];
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Calendar,
-  params: [
-    {
-      user: {},
-      defaultFirstDay: 1,
-      currentDate: {getDayOfWeek: () => 3},
-      view: 'week',
-    },
-  ],
-  sequentialRenders: [
-    {
-      user: {},
-      defaultFirstDay: 1,
-      currentDate: {getDayOfWeek: () => 3},
-      view: 'week',
-    },
-    {
-      user: {},
-      defaultFirstDay: 1,
-      currentDate: {getDayOfWeek: () => 3},
-      view: 'day',
-    },
-  ],
-};
-
-```
-
-## Code
-
-```javascript
-"use strict";
-import { c as _c } from "react/compiler-runtime";
-
-function getWeekendDays(user) {
-  return [0, 6];
-}
-
-function getConfig(weekendDays) {
-  return [1, 5];
-}
-
-function Calendar(t0) {
-  const $ = _c(12);
-  const { user, defaultFirstDay, currentDate, view } = t0;
-  let daysToDisplay;
-  let firstDay;
-  if (
-    $[0] !== currentDate ||
-    $[1] !== defaultFirstDay ||
-    $[2] !== user ||
-    $[3] !== view
-  ) {
-    const weekendDays = getWeekendDays(user);
-    firstDay = defaultFirstDay;
-    daysToDisplay = 7;
-    if (view === "week") {
-      let lastDay;
-
-      [firstDay, lastDay] = getConfig(weekendDays);
-      daysToDisplay = ((7 + lastDay - firstDay) % 7) + 1;
-    } else {
-      if (view === "day") {
-        let t1;
-        if ($[6] !== currentDate) {
-          t1 = currentDate.getDayOfWeek();
-          $[6] = currentDate;
-          $[7] = t1;
-        } else {
-          t1 = $[7];
-        }
-        firstDay = t1;
-        daysToDisplay = 1;
-      }
-    }
-    $[0] = currentDate;
-    $[1] = defaultFirstDay;
-    $[2] = user;
-    $[3] = view;
-    $[4] = daysToDisplay;
-    $[5] = firstDay;
-  } else {
-    daysToDisplay = $[4];
-    firstDay = $[5];
-  }
-  let t1;
-  if ($[8] !== currentDate || $[9] !== daysToDisplay || $[10] !== firstDay) {
-    t1 = [currentDate, firstDay, daysToDisplay];
-    $[8] = currentDate;
-    $[9] = daysToDisplay;
-    $[10] = firstDay;
-    $[11] = t1;
-  } else {
-    t1 = $[11];
-  }
-  return t1;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Calendar,
-  params: [
-    {
-      user: {},
-      defaultFirstDay: 1,
-      currentDate: { getDayOfWeek: () => 3 },
-      view: "week",
-    },
-  ],
-
-  sequentialRenders: [
-    {
-      user: {},
-      defaultFirstDay: 1,
-      currentDate: { getDayOfWeek: () => 3 },
-      view: "week",
-    },
-    {
-      user: {},
-      defaultFirstDay: 1,
-      currentDate: { getDayOfWeek: () => 3 },
-      view: "day",
-    },
-  ],
-};
-
-```
-      
-### Eval output
-(kind: ok) [{"getDayOfWeek":"[[ function params=0 ]]"},1,5]
-[{"getDayOfWeek":"[[ function params=0 ]]"},3,1]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-destructuring-reassignment-undefined-variable.js

@@ -1,53 +0,0 @@
-// @flow @compilationMode:"infer"
-'use strict';
-
-function getWeekendDays(user) {
-  return [0, 6];
-}
-
-function getConfig(weekendDays) {
-  return [1, 5];
-}
-
-component Calendar(user, defaultFirstDay, currentDate, view) {
-  const weekendDays = getWeekendDays(user);
-  let firstDay = defaultFirstDay;
-  let daysToDisplay = 7;
-  if (view === 'week') {
-    let lastDay;
-    // this assignment produces invalid code
-    [firstDay, lastDay] = getConfig(weekendDays);
-    daysToDisplay = ((7 + lastDay - firstDay) % 7) + 1;
-  } else if (view === 'day') {
-    firstDay = currentDate.getDayOfWeek();
-    daysToDisplay = 1;
-  }
-
-  return [currentDate, firstDay, daysToDisplay];
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Calendar,
-  params: [
-    {
-      user: {},
-      defaultFirstDay: 1,
-      currentDate: {getDayOfWeek: () => 3},
-      view: 'week',
-    },
-  ],
-  sequentialRenders: [
-    {
-      user: {},
-      defaultFirstDay: 1,
-      currentDate: {getDayOfWeek: () => 3},
-      view: 'week',
-    },
-    {
-      user: {},
-      defaultFirstDay: 1,
-      currentDate: {getDayOfWeek: () => 3},
-      view: 'day',
-    },
-  ],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.expect.md

@@ -1,117 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer"
-import {useState, useRef, useEffect} from 'react';
-
-function Component({x, y}) {
-  const previousXRef = useRef(null);
-  const previousYRef = useRef(null);
-
-  const [data, setData] = useState(null);
-
-  useEffect(() => {
-    const previousX = previousXRef.current;
-    previousXRef.current = x;
-    const previousY = previousYRef.current;
-    previousYRef.current = y;
-    if (!areEqual(x, previousX) || !areEqual(y, previousY)) {
-      const data = load({x, y});
-      setData(data);
-    }
-  }, [x, y]);
-
-  return data;
-}
-
-function areEqual(a, b) {
-  return a === b;
-}
-
-function load({x, y}) {
-  return x * y;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{x: 0, y: 0}],
-  sequentialRenders: [
-    {x: 0, y: 0},
-    {x: 1, y: 0},
-    {x: 1, y: 1},
-  ],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer"
-import { useState, useRef, useEffect } from "react";
-
-function Component(t0) {
-  const $ = _c(4);
-  const { x, y } = t0;
-  const previousXRef = useRef(null);
-  const previousYRef = useRef(null);
-
-  const [data, setData] = useState(null);
-  let t1;
-  let t2;
-  if ($[0] !== x || $[1] !== y) {
-    t1 = () => {
-      const previousX = previousXRef.current;
-      previousXRef.current = x;
-      const previousY = previousYRef.current;
-      previousYRef.current = y;
-      if (!areEqual(x, previousX) || !areEqual(y, previousY)) {
-        const data_0 = load({ x, y });
-        setData(data_0);
-      }
-    };
-
-    t2 = [x, y];
-    $[0] = x;
-    $[1] = y;
-    $[2] = t1;
-    $[3] = t2;
-  } else {
-    t1 = $[2];
-    t2 = $[3];
-  }
-  useEffect(t1, t2);
-  return data;
-}
-
-function areEqual(a, b) {
-  return a === b;
-}
-
-function load({ x, y }) {
-  return x * y;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{ x: 0, y: 0 }],
-  sequentialRenders: [
-    { x: 0, y: 0 },
-    { x: 1, y: 0 },
-    { x: 1, y: 1 },
-  ],
-};
-
-```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":163},"end":{"line":22,"column":1,"index":631},"filename":"valid-setState-in-useEffect-controlled-by-ref-value.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":1,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: ok) 0
-0
-1

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.js

@@ -1,40 +0,0 @@
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer"
-import {useState, useRef, useEffect} from 'react';
-
-function Component({x, y}) {
-  const previousXRef = useRef(null);
-  const previousYRef = useRef(null);
-
-  const [data, setData] = useState(null);
-
-  useEffect(() => {
-    const previousX = previousXRef.current;
-    previousXRef.current = x;
-    const previousY = previousYRef.current;
-    previousYRef.current = y;
-    if (!areEqual(x, previousX) || !areEqual(y, previousY)) {
-      const data = load({x, y});
-      setData(data);
-    }
-  }, [x, y]);
-
-  return data;
-}
-
-function areEqual(a, b) {
-  return a === b;
-}
-
-function load({x, y}) {
-  return x * y;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{x: 0, y: 0}],
-  sequentialRenders: [
-    {x: 0, y: 0},
-    {x: 1, y: 0},
-    {x: 1, y: 1},
-  ],
-};

compiler/packages/snap/src/fixture-utils.ts

@@ -44,21 +44,6 @@ function stripExtension(filename: string, extensions: Array<string>): string {
   return filename;
 }
 
-/**
- * Strip all extensions from a filename
- * e.g., "foo.expect.md" -> "foo"
- */
-function stripAllExtensions(filename: string): string {
-  let result = filename;
-  while (true) {
-    const extension = path.extname(result);
-    if (extension === '') {
-      return result;
-    }
-    result = path.basename(result, extension);
-  }
-}
-
 export async function readTestFilter(): Promise<TestFilter | null> {
   if (!(await exists(FILTER_PATH))) {
     throw new Error(`testfilter file not found at \`${FILTER_PATH}\``);
@@ -126,25 +111,11 @@ async function readInputFixtures(
   } else {
     inputFiles = (
       await Promise.all(
-        filter.paths.map(pattern => {
-          // If the pattern already has an extension other than .expect.md,
-          // search for the pattern directly. Otherwise, search for the
-          // pattern with the expected input extensions added.
-          // Eg
-          // `alias-while` => search for `alias-while{.js,.jsx,.ts,.tsx}`
-          // `alias-while.js` => search as-is
-          // `alias-while.expect.md` => search for `alias-while{.js,.jsx,.ts,.tsx}`
-          const basename = path.basename(pattern);
-          const basenameWithoutExt = stripAllExtensions(basename);
-          const hasExtension = basename !== basenameWithoutExt;
-          const globPattern =
-            hasExtension && !pattern.endsWith(SNAPSHOT_EXTENSION)
-              ? pattern
-              : `${basenameWithoutExt}{${INPUT_EXTENSIONS.join(',')}}`;
-          return glob.glob(globPattern, {
+        filter.paths.map(pattern =>
+          glob.glob(`${pattern}{${INPUT_EXTENSIONS.join(',')}}`, {
             cwd: rootDir,
-          });
-        }),
+          }),
+        ),
       )
     ).flat();
   }
@@ -179,13 +150,11 @@ async function readOutputFixtures(
   } else {
     outputFiles = (
       await Promise.all(
-        filter.paths.map(pattern => {
-          // Strip all extensions and find matching .expect.md files
-          const basenameWithoutExt = stripAllExtensions(pattern);
-          return glob.glob(`${basenameWithoutExt}${SNAPSHOT_EXTENSION}`, {
+        filter.paths.map(pattern =>
+          glob.glob(`${pattern}${SNAPSHOT_EXTENSION}`, {
             cwd: rootDir,
-          });
-        }),
+          }),
+        ),
       )
     ).flat();
   }

compiler/packages/snap/src/runner.ts

@@ -35,7 +35,6 @@ type RunnerOptions = {
   watch: boolean;
   filter: boolean;
   update: boolean;
-  pattern?: string;
 };
 
 const opts: RunnerOptions = yargs
@@ -63,15 +62,9 @@ const opts: RunnerOptions = yargs
     'Only run fixtures which match the contents of testfilter.txt',
   )
   .default('filter', false)
-  .string('pattern')
-  .alias('p', 'pattern')
-  .describe(
-    'pattern',
-    'Optional glob pattern to filter fixtures (e.g., "error.*", "use-memo")',
-  )
   .help('help')
   .strict()
-  .parseSync(hideBin(process.argv)) as RunnerOptions;
+  .parseSync(hideBin(process.argv));
 
 /**
  * Do a test run and return the test results
@@ -178,13 +171,7 @@ export async function main(opts: RunnerOptions): Promise<void> {
   worker.getStderr().pipe(process.stderr);
   worker.getStdout().pipe(process.stdout);
 
-  // If pattern is provided, force watch mode off and use pattern filter
-  const shouldWatch = opts.watch && opts.pattern == null;
-  if (opts.watch && opts.pattern != null) {
-    console.warn('NOTE: --watch is ignored when a --pattern is supplied');
-  }
-
-  if (shouldWatch) {
+  if (opts.watch) {
     makeWatchRunner(state => onChange(worker, state), opts.filter);
     if (opts.filter) {
       /**
@@ -229,18 +216,7 @@ export async function main(opts: RunnerOptions): Promise<void> {
             try {
               execSync('yarn build', {cwd: PROJECT_ROOT});
               console.log('Built compiler successfully with tsup');
-
-              // Determine which filter to use
-              let testFilter: TestFilter | null = null;
-              if (opts.pattern) {
-                testFilter = {
-                  debug: true,
-                  paths: [opts.pattern],
-                };
-              } else if (opts.filter) {
-                testFilter = await readTestFilter();
-              }
-
+              const testFilter = opts.filter ? await readTestFilter() : null;
               const results = await runFixtures(worker, testFilter, 0);
               if (opts.update) {
                 update(results);

packages/react-client/src/ReactFlightClient.js

@@ -813,12 +813,6 @@ function createInitializedStreamChunk<
   value: T,
   controller: FlightStreamController,
 ): InitializedChunk<T> {
-  if (__DEV__) {
-    // Retain a strong reference to the Response while we wait for chunks.
-    if (response._pendingChunks++ === 0) {
-      response._weakResponse.response = response;
-    }
-  }
   // We use the reason field to stash the controller since we already have that
   // field. It's a bit of a hack but efficient.
   // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
@@ -3081,6 +3075,7 @@ function resolveStream<T: ReadableStream | $AsyncIterable<any, any, void>>(
     // We already resolved. We didn't expect to see this.
     return;
   }
+  releasePendingChunk(response, chunk);
 
   const resolveListeners = chunk.value;
 
@@ -3380,14 +3375,6 @@ function stopStream(
     // We didn't expect not to have an existing stream;
     return;
   }
-  if (__DEV__) {
-    if (--response._pendingChunks === 0) {
-      // We're no longer waiting for any more chunks. We can release the strong
-      // reference to the response. We'll regain it if we ask for any more data
-      // later on.
-      response._weakResponse.response = null;
-    }
-  }
   const streamChunk: InitializedStreamChunk<any> = (chunk: any);
   const controller = streamChunk.reason;
   controller.close(row === '' ? '"$undefined"' : row);
@@ -4870,7 +4857,6 @@ export function processBinaryChunk(
           resolvedRowTag === 65 /* "A" */ ||
           resolvedRowTag === 79 /* "O" */ ||
           resolvedRowTag === 111 /* "o" */ ||
-          resolvedRowTag === 98 /* "b" */ ||
           resolvedRowTag === 85 /* "U" */ ||
           resolvedRowTag === 83 /* "S" */ ||
           resolvedRowTag === 115 /* "s" */ ||
@@ -4930,31 +4916,14 @@ export function processBinaryChunk(
       // We found the last chunk of the row
       const length = lastIdx - i;
       const lastChunk = new Uint8Array(chunk.buffer, offset, length);
-
-      // Check if this is a Uint8Array for a byte stream. We enqueue it
-      // immediately but need to determine if we can use zero-copy or must copy.
-      if (rowTag === 98 /* "b" */) {
-        resolveBuffer(
-          response,
-          rowID,
-          // If we're at the end of the RSC chunk, no more parsing will access
-          // this buffer and we don't need to copy the chunk to allow detaching
-          // the buffer, otherwise we need to copy.
-          lastIdx === chunkLength ? lastChunk : lastChunk.slice(),
-          streamState,
-        );
-      } else {
-        // Process all other row types.
-        processFullBinaryRow(
-          response,
-          streamState,
-          rowID,
-          rowTag,
-          buffer,
-          lastChunk,
-        );
-      }
-
+      processFullBinaryRow(
+        response,
+        streamState,
+        rowID,
+        rowTag,
+        buffer,
+        lastChunk,
+      );
       // Reset state machine for a new row
       i = lastIdx;
       if (rowState === ROW_CHUNK_BY_NEWLINE) {
@@ -4967,27 +4936,14 @@ export function processBinaryChunk(
       rowLength = 0;
       buffer.length = 0;
     } else {
-      // The rest of this row is in a future chunk.
+      // The rest of this row is in a future chunk. We stash the rest of the
+      // current chunk until we can process the full row.
       const length = chunk.byteLength - i;
       const remainingSlice = new Uint8Array(chunk.buffer, offset, length);
-
-      // For byte streams, we can enqueue the partial row immediately without
-      // copying since we're at the end of the RSC chunk and no more parsing
-      // will access this buffer.
-      if (rowTag === 98 /* "b" */) {
-        // Update how many bytes we're still waiting for. We need to do this
-        // before enqueueing, as enqueue will detach the buffer and byteLength
-        // will become 0.
-        rowLength -= remainingSlice.byteLength;
-        resolveBuffer(response, rowID, remainingSlice, streamState);
-      } else {
-        // For other row types, stash the rest of the current chunk until we can
-        // process the full row.
-        buffer.push(remainingSlice);
-        // Update how many bytes we're still waiting for. If we're looking for
-        // a newline, this doesn't hurt since we'll just ignore it.
-        rowLength -= remainingSlice.byteLength;
-      }
+      buffer.push(remainingSlice);
+      // Update how many bytes we're still waiting for. If we're looking for
+      // a newline, this doesn't hurt since we'll just ignore it.
+      rowLength -= remainingSlice.byteLength;
       break;
     }
   }

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -3884,19 +3884,4 @@ describe('ReactFlight', () => {
       </main>,
     );
   });
-
-  // @gate enableOptimisticKey
-  it('collapses optimistic keys to an optimistic key', async () => {
-    function Bar({text}) {
-      return <div />;
-    }
-    function Foo() {
-      return <Bar key={ReactServer.optimisticKey} />;
-    }
-    const transport = ReactNoopFlightServer.render({
-      element: <Foo key="Outer Key" />,
-    });
-    const model = await ReactNoopFlightClient.read(transport);
-    expect(model.element.key).toBe(React.optimisticKey);
-  });
 });

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -120,7 +120,6 @@ import {
   MEMO_SYMBOL_STRING,
   SERVER_CONTEXT_SYMBOL_STRING,
   LAZY_SYMBOL_STRING,
-  REACT_OPTIMISTIC_KEY,
 } from '../shared/ReactSymbols';
 import {enableStyleXFeatures} from 'react-devtools-feature-flags';
 
@@ -1577,6 +1576,7 @@ export function attach(
       currentRoot = rootInstance;
       unmountInstanceRecursively(rootInstance);
       rootToFiberInstanceMap.delete(root);
+      flushPendingEvents();
       currentRoot = (null: any);
     });
 
@@ -1646,6 +1646,7 @@ export function attach(
       currentRoot = newRoot;
       setRootPseudoKey(currentRoot.id, root.current);
       mountFiberRecursively(root.current, false);
+      flushPendingEvents();
       currentRoot = (null: any);
     });
 
@@ -2158,6 +2159,7 @@ export function attach(
   let pendingOperationsQueue: Array<OperationsArray> | null = [];
   const pendingStringTable: Map<string, StringTableEntry> = new Map();
   let pendingStringTableLength: number = 0;
+  let pendingUnmountedRootID: FiberInstance['id'] | null = null;
 
   function pushOperation(op: number): void {
     if (__DEV__) {
@@ -2185,7 +2187,8 @@ export function attach(
       pendingOperations.length === 0 &&
       pendingRealUnmountedIDs.length === 0 &&
       pendingRealUnmountedSuspenseIDs.length === 0 &&
-      pendingSuspenderChanges.size === 0
+      pendingSuspenderChanges.size === 0 &&
+      pendingUnmountedRootID === null
     );
   }
 
@@ -2247,7 +2250,9 @@ export function attach(
       return;
     }
 
-    const numUnmountIDs = pendingRealUnmountedIDs.length;
+    const numUnmountIDs =
+      pendingRealUnmountedIDs.length +
+      (pendingUnmountedRootID === null ? 0 : 1);
     const numUnmountSuspenseIDs = pendingRealUnmountedSuspenseIDs.length;
     const numSuspenderChanges = pendingSuspenderChanges.size;
 
@@ -2325,6 +2330,11 @@ export function attach(
       for (let j = 0; j < pendingRealUnmountedIDs.length; j++) {
         operations[i++] = pendingRealUnmountedIDs[j];
       }
+      // The root ID should always be unmounted last.
+      if (pendingUnmountedRootID !== null) {
+        operations[i] = pendingUnmountedRootID;
+        i++;
+      }
     }
 
     // Fill in pending operations.
@@ -2372,6 +2382,7 @@ export function attach(
     pendingRealUnmountedIDs.length = 0;
     pendingRealUnmountedSuspenseIDs.length = 0;
     pendingSuspenderChanges.clear();
+    pendingUnmountedRootID = null;
     pendingStringTable.clear();
     pendingStringTableLength = 0;
   }
@@ -2857,6 +2868,7 @@ export function attach(
       // Already disconnected.
       return;
     }
+    const fiber = fiberInstance.data;
 
     if (trackedPathMatchInstance === fiberInstance) {
       // We're in the process of trying to restore previous selection.
@@ -2866,7 +2878,17 @@ export function attach(
     }
 
     const id = fiberInstance.id;
-    pendingRealUnmountedIDs.push(id);
+    const isRoot = fiber.tag === HostRoot;
+    if (isRoot) {
+      // Roots must be removed only after all children have been removed.
+      // So we track it separately.
+      pendingUnmountedRootID = id;
+    } else {
+      // To maintain child-first ordering,
+      // we'll push it into one of these queues,
+      // and later arrange them in the correct order.
+      pendingRealUnmountedIDs.push(id);
+    }
   }
 
   function recordSuspenseResize(suspenseNode: SuspenseNode): void {
@@ -4850,10 +4872,7 @@ export function attach(
               }
               let previousSiblingOfBestMatch = null;
               let bestMatch = remainingReconcilingChildren;
-              if (
-                componentInfo.key != null &&
-                componentInfo.key !== REACT_OPTIMISTIC_KEY
-              ) {
+              if (componentInfo.key != null) {
                 // If there is a key try to find a matching key in the set.
                 bestMatch = remainingReconcilingChildren;
                 while (bestMatch !== null) {
@@ -5753,12 +5772,11 @@ export function attach(
 
         mountFiberRecursively(root.current, false);
 
+        flushPendingEvents();
+
+        needsToFlushComponentLogs = false;
         currentRoot = (null: any);
       });
-
-      flushPendingEvents();
-
-      needsToFlushComponentLogs = false;
     }
   }
 
@@ -6149,7 +6167,7 @@ export function attach(
       return {
         displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
         id: instance.id,
-        key: fiber.key === REACT_OPTIMISTIC_KEY ? null : fiber.key,
+        key: fiber.key,
         env: null,
         stack:
           fiber._debugOwner == null || fiber._debugStack == null
@@ -6162,11 +6180,7 @@ export function attach(
       return {
         displayName: componentInfo.name || 'Anonymous',
         id: instance.id,
-        key:
-          componentInfo.key == null ||
-          componentInfo.key === REACT_OPTIMISTIC_KEY
-            ? null
-            : componentInfo.key,
+        key: componentInfo.key == null ? null : componentInfo.key,
         env: componentInfo.env == null ? null : componentInfo.env,
         stack:
           componentInfo.owner == null || componentInfo.debugStack == null
@@ -7090,7 +7104,7 @@ export function attach(
       // Does the component have legacy context attached to it.
       hasLegacyContext,
 
-      key: key != null && key !== REACT_OPTIMISTIC_KEY ? key : null,
+      key: key != null ? key : null,
 
       type: elementType,
 
@@ -8649,7 +8663,7 @@ export function attach(
     }
     return {
       displayName,
-      key: key === REACT_OPTIMISTIC_KEY ? null : key,
+      key,
       index,
     };
   }
@@ -8657,11 +8671,7 @@ export function attach(
   function getVirtualPathFrame(virtualInstance: VirtualInstance): PathFrame {
     return {
       displayName: virtualInstance.data.name || '',
-      key:
-        virtualInstance.data.key == null ||
-        virtualInstance.data.key === REACT_OPTIMISTIC_KEY
-          ? null
-          : virtualInstance.data.key,
+      key: virtualInstance.data.key == null ? null : virtualInstance.data.key,
       index: -1, // We use -1 to indicate that this is a virtual path frame.
     };
   }

packages/react-devtools-shared/src/backend/shared/ReactSymbols.js

@@ -72,9 +72,3 @@ export const SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED_SYMBOL_STRING =
 export const REACT_MEMO_CACHE_SENTINEL: symbol = Symbol.for(
   'react.memo_cache_sentinel',
 );
-
-import type {ReactOptimisticKey} from 'shared/ReactTypes';
-
-export const REACT_OPTIMISTIC_KEY: ReactOptimisticKey = (Symbol.for(
-  'react.optimistic_key',
-): any);

packages/react-devtools-shared/src/devtools/store.js

@@ -189,8 +189,6 @@ export default class Store extends EventEmitter<{
     {errorCount: number, warningCount: number},
   > = new Map();
 
-  _focusedTransition: 0 | Element['id'] = 0;
-
   // At least one of the injected renderers contains (DEV only) owner metadata.
   _hasOwnerMetadata: boolean = false;
 
@@ -937,9 +935,10 @@ export default class Store extends EventEmitter<{
   }
 
   /**
+   * @param rootID
    * @param uniqueSuspendersOnly Filters out boundaries without unique suspenders
    */
-  getSuspendableDocumentOrderSuspenseInitialPaint(
+  getSuspendableDocumentOrderSuspense(
     uniqueSuspendersOnly: boolean,
   ): Array<SuspenseTimelineStep> {
     const target: Array<SuspenseTimelineStep> = [];
@@ -991,76 +990,6 @@ export default class Store extends EventEmitter<{
     return target;
   }
 
-  _pushSuspenseChildrenInDocumentOrder(
-    children: Array<Element['id']>,
-    target: Array<SuspenseNode['id']>,
-  ): void {
-    for (let i = 0; i < children.length; i++) {
-      const childID = children[i];
-      const suspense = this.getSuspenseByID(childID);
-      if (suspense !== null) {
-        target.push(suspense.id);
-      } else {
-        const childElement = this.getElementByID(childID);
-        if (childElement !== null) {
-          this._pushSuspenseChildrenInDocumentOrder(
-            childElement.children,
-            target,
-          );
-        }
-      }
-    }
-  }
-
-  getSuspenseChildren(id: Element['id']): Array<SuspenseNode['id']> {
-    const transitionChildren: Array<SuspenseNode['id']> = [];
-
-    const root = this._idToElement.get(id);
-    if (root === undefined) {
-      return transitionChildren;
-    }
-
-    this._pushSuspenseChildrenInDocumentOrder(
-      root.children,
-      transitionChildren,
-    );
-
-    return transitionChildren;
-  }
-
-  /**
-   * @param uniqueSuspendersOnly Filters out boundaries without unique suspenders
-   */
-  getSuspendableDocumentOrderSuspenseTransition(
-    uniqueSuspendersOnly: boolean,
-  ): Array<SuspenseTimelineStep> {
-    const target: Array<SuspenseTimelineStep> = [];
-    const focusedTransitionID = this._focusedTransition;
-    if (focusedTransitionID === null) {
-      return target;
-    }
-
-    target.push({
-      id: focusedTransitionID,
-      // TODO: Get environment for Activity
-      environment: null,
-      endTime: 0,
-    });
-
-    const transitionChildren = this.getSuspenseChildren(focusedTransitionID);
-
-    this.pushTimelineStepsInDocumentOrder(
-      transitionChildren,
-      target,
-      uniqueSuspendersOnly,
-      // TODO: Get environment for Activity
-      [],
-      0, // Don't pass a minimum end time at the root. The root is always first so doesn't matter.
-    );
-
-    return target;
-  }
-
   pushTimelineStepsInDocumentOrder(
     children: Array<SuspenseNode['id']>,
     target: Array<SuspenseTimelineStep>,
@@ -1116,14 +1045,7 @@ export default class Store extends EventEmitter<{
     uniqueSuspendersOnly: boolean,
   ): $ReadOnlyArray<SuspenseTimelineStep> {
     const timeline =
-      this._focusedTransition === 0
-        ? this.getSuspendableDocumentOrderSuspenseInitialPaint(
-            uniqueSuspendersOnly,
-          )
-        : this.getSuspendableDocumentOrderSuspenseTransition(
-            uniqueSuspendersOnly,
-          );
-
+      this.getSuspendableDocumentOrderSuspense(uniqueSuspendersOnly);
     if (timeline.length === 0) {
       return timeline;
     }
@@ -1136,33 +1058,6 @@ export default class Store extends EventEmitter<{
     return timeline;
   }
 
-  getActivities(): Array<{id: Element['id'], depth: number}> {
-    const target: Array<{id: Element['id'], depth: number}> = [];
-    // TODO: Keep a live tree in the backend so we don't need to recalculate
-    // this each time while also including filtered Activities.
-    this._pushActivitiesInDocumentOrder(this.roots, target, 0);
-    return target;
-  }
-
-  _pushActivitiesInDocumentOrder(
-    children: $ReadOnlyArray<Element['id']>,
-    target: Array<{id: Element['id'], depth: number}>,
-    depth: number,
-  ): void {
-    for (let i = 0; i < children.length; i++) {
-      const child = this._idToElement.get(children[i]);
-      if (child === undefined) {
-        continue;
-      }
-      if (child.type === ElementTypeActivity && child.nameProp !== null) {
-        target.push({id: child.id, depth});
-        this._pushActivitiesInDocumentOrder(child.children, target, depth + 1);
-      } else {
-        this._pushActivitiesInDocumentOrder(child.children, target, depth);
-      }
-    }
-  }
-
   getRendererIDForElement(id: number): number | null {
     let current = this._idToElement.get(id);
     while (current !== undefined) {
@@ -1349,7 +1244,7 @@ export default class Store extends EventEmitter<{
     const removedElementIDs: Map<number, number> = new Map();
     const removedSuspenseIDs: Map<SuspenseNode['id'], SuspenseNode['id']> =
       new Map();
-    let nextActivitySliceID: Element['id'] | null = null;
+    let nextActivitySliceID = null;
 
     let i = 2;
 
@@ -2224,10 +2119,6 @@ export default class Store extends EventEmitter<{
       }
     }
 
-    if (nextActivitySliceID !== null) {
-      this._focusedTransition = nextActivitySliceID;
-    }
-
     this.emit('mutated', [
       addedElementIDs,
       removedElementIDs,

packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js

@@ -59,7 +59,6 @@ export type StateContext = {
 
   // Activity slice
   activityID: Element['id'] | null,
-  activities: $ReadOnlyArray<{id: Element['id'], depth: number}>,
 
   // Inspection element panel
   inspectedElementID: number | null,
@@ -173,7 +172,6 @@ type State = {
 
   // Activity slice
   activityID: Element['id'] | null,
-  activities: $ReadOnlyArray<{id: Element['id'], depth: number}>,
 
   // Inspection element panel
   inspectedElementID: number | null,
@@ -811,7 +809,6 @@ function reduceActivityState(
     case 'HANDLE_STORE_MUTATION':
       let {activityID} = state;
       const [, , activitySliceIDChange] = action.payload;
-      const activities = store.getActivities();
       if (activitySliceIDChange === 0 && activityID !== null) {
         activityID = null;
       } else if (
@@ -820,11 +817,10 @@ function reduceActivityState(
       ) {
         activityID = activitySliceIDChange;
       }
-      if (activityID !== state.activityID || activities !== state.activities) {
+      if (activityID !== state.activityID) {
         return {
           ...state,
           activityID,
-          activities,
         };
       }
   }
@@ -867,7 +863,6 @@ function getInitialState({
 
     // Activity slice
     activityID: null,
-    activities: store.getActivities(),
 
     // Inspection element panel
     inspectedElementID:

packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.css

@@ -1,33 +1,20 @@
-.ActivityListContaier {
-  display: flex;
-  flex-direction: column;
-}
-
-.ActivityListHeader {
-  /* even if empty, provides layout alignment with the main view */
-  display: flex;
-  flex: 0 0 42px;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.ActivityListList {
+.ActivityList {
   cursor: default;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-.ActivityListList[data-pending-activity-slice-selection="true"] {
+.ActivityList[data-pending-activity-slice-selection="true"] {
   cursor: wait;
 }
 
-.ActivityListList:focus {
+.ActivityList:focus {
   outline: none;
 }
 
 .ActivityListItem {
   color: var(--color-component-name);
-  line-height: var(--line-height-data);
   padding: 0 0.25rem;
   user-select: none;
 }
@@ -40,7 +27,7 @@
   background-color: var(--color-background-inactive);
 }
 
-.ActivityListList:focus .ActivityListItem[aria-selected="true"] {
+.ActivityList:focus .ActivityListItem[aria-selected="true"] {
   background-color: var(--color-background-selected);
   color: var(--color-text-selected);
 

packages/react-devtools-shared/src/devtools/views/SuspenseTab/ActivityList.js

@@ -15,14 +15,10 @@ import typeof {
   SyntheticMouseEvent,
   SyntheticKeyboardEvent,
 } from 'react-dom-bindings/src/events/SyntheticEvent';
-import type Store from 'react-devtools-shared/src/devtools/store';
 
 import * as React from 'react';
-import {useContext, useMemo, useTransition} from 'react';
-import {
-  ComponentFilterActivitySlice,
-  ElementTypeActivity,
-} from 'react-devtools-shared/src/frontend/types';
+import {useContext, useTransition} from 'react';
+import {ComponentFilterActivitySlice} from 'react-devtools-shared/src/frontend/types';
 import styles from './ActivityList.css';
 import {
   TreeStateContext,
@@ -30,8 +26,6 @@ import {
 } from '../Components/TreeContext';
 import {useHighlightHostInstance} from '../hooks';
 import {StoreContext} from '../context';
-import ButtonIcon from '../ButtonIcon';
-import Button from '../Button';
 
 export function useChangeActivitySliceAction(): (
   id: Element['id'] | null,
@@ -68,49 +62,15 @@ export function useChangeActivitySliceAction(): (
   return changeActivitySliceAction;
 }
 
-function findNearestActivityParentID(
-  elementID: Element['id'],
-  store: Store,
-): Element['id'] | null {
-  let currentID: null | Element['id'] = elementID;
-  while (currentID !== null) {
-    const element = store.getElementByID(currentID);
-    if (element === null) {
-      return null;
-    }
-    if (element.type === ElementTypeActivity) {
-      return element.id;
-    }
-    currentID = element.parentID;
-  }
-
-  return currentID;
-}
-
-function useSelectedActivityID(): Element['id'] | null {
-  const {inspectedElementID} = useContext(TreeStateContext);
-  const store = useContext(StoreContext);
-  return useMemo(() => {
-    if (inspectedElementID === null) {
-      return null;
-    }
-    const nearestActivityID = findNearestActivityParentID(
-      inspectedElementID,
-      store,
-    );
-    return nearestActivityID;
-  }, [inspectedElementID, store]);
-}
-
 export default function ActivityList({
   activities,
 }: {
-  activities: $ReadOnlyArray<{id: Element['id'], depth: number}>,
+  activities: $ReadOnlyArray<Element>,
 }): React$Node {
-  const {activityID, inspectedElementID} = useContext(TreeStateContext);
+  const {inspectedElementID} = useContext(TreeStateContext);
   const treeDispatch = useContext(TreeDispatcherContext);
-  const store = useContext(StoreContext);
-  const selectedActivityID = useSelectedActivityID();
+  // TODO: Derive from inspected element
+  const selectedActivityID = inspectedElementID;
   const {highlightHostInstance, clearHighlightHostInstance} =
     useHighlightHostInstance();
 
@@ -119,13 +79,8 @@ export default function ActivityList({
   const changeActivitySliceAction = useChangeActivitySliceAction();
 
   function handleKeyDown(event: SyntheticKeyboardEvent) {
+    // TODO: Implement keyboard navigation
     switch (event.key) {
-      case 'Escape':
-        startActivitySliceSelection(() => {
-          changeActivitySliceAction(null);
-        });
-        event.preventDefault();
-        break;
       case 'Enter':
       case ' ':
         if (inspectedElementID !== null) {
@@ -194,61 +149,25 @@ export default function ActivityList({
   }
 
   return (
-    <div className={styles.ActivityListContaier}>
-      <div className={styles.ActivityListHeader}>
-        {activityID !== null && (
-          // TODO: Obsolete once filtered Activities are included in this list.
-          <Button
-            onClick={startActivitySliceSelection.bind(
-              null,
-              changeActivitySliceAction.bind(null, null),
-            )}
-            title="Back to full tree view">
-            <ButtonIcon type="previous" />
-          </Button>
-        )}
-      </div>
-      <ol
-        role="listbox"
-        className={styles.ActivityListList}
-        data-pending-activity-slice-selection={isPendingActivitySliceSelection}
-        tabIndex={0}
-        onKeyDown={handleKeyDown}>
-        {activities.map(({id, depth}) => {
-          const activity = store.getElementByID(id);
-          if (activity === null) {
-            return null;
-          }
-          const name = activity.nameProp;
-          if (name === null) {
-            // This shouldn't actually happen. We only want to show activities with a name.
-            // And hide the whole list if no named Activities are present.
-            return null;
-          }
-
-          // TODO: Filtered Activities should have dedicated styles once we include
-          // filtered Activities in this list.
-          return (
-            <li
-              key={activity.id}
-              role="option"
-              aria-selected={
-                activity.id === selectedActivityID ? 'true' : 'false'
-              }
-              className={styles.ActivityListItem}
-              onClick={handleClick.bind(null, activity.id)}
-              onDoubleClick={handleDoubleClick}
-              onPointerOver={highlightHostInstance.bind(
-                null,
-                activity.id,
-                false,
-              )}
-              onPointerLeave={clearHighlightHostInstance}>
-              {'\u00A0'.repeat(depth) + name}
-            </li>
-          );
-        })}
-      </ol>
-    </div>
+    <ol
+      role="listbox"
+      className={styles.ActivityList}
+      data-pending-activity-slice-selection={isPendingActivitySliceSelection}
+      tabIndex={0}
+      onKeyDown={handleKeyDown}>
+      {activities.map(activity => (
+        <li
+          key={activity.id}
+          role="option"
+          aria-selected={activity.id === selectedActivityID ? 'true' : 'false'}
+          className={styles.ActivityListItem}
+          onClick={handleClick.bind(null, activity.id)}
+          onDoubleClick={handleDoubleClick}
+          onPointerOver={highlightHostInstance.bind(null, activity.id, false)}
+          onPointerLeave={clearHighlightHostInstance}>
+          {activity.nameProp}
+        </li>
+      ))}
+    </ol>
   );
 }

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js

@@ -12,10 +12,7 @@ import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/Syntheti
 
 import * as React from 'react';
 import {useContext} from 'react';
-import {
-  TreeDispatcherContext,
-  TreeStateContext,
-} from '../Components/TreeContext';
+import {TreeDispatcherContext} from '../Components/TreeContext';
 import {StoreContext} from '../context';
 import {useHighlightHostInstance} from '../hooks';
 import styles from './SuspenseBreadcrumbs.css';
@@ -26,7 +23,6 @@ import {
 
 export default function SuspenseBreadcrumbs(): React$Node {
   const store = useContext(StoreContext);
-  const {activityID} = useContext(TreeStateContext);
   const treeDispatch = useContext(TreeDispatcherContext);
   const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
   const {selectedSuspenseID, lineage, roots} = useContext(
@@ -46,8 +42,8 @@ export default function SuspenseBreadcrumbs(): React$Node {
     <ol className={styles.SuspenseBreadcrumbsList}>
       {lineage === null ? null : lineage.length === 0 ? (
         // We selected the root. This means that we're currently viewing the Transition
-        // that rendered the whole screen. In laymans terms this is really "Initial Paint" .
-        // When we're looking at a subtree selection, then the equivalent is a
+        // that rendered the whole screen. In laymans terms this is really "Initial Paint".
+        // TODO: Once we add subtree selection, then the equivalent should be called
         // "Transition" since in that case it's really about a Transition within the page.
         roots.length > 0 ? (
           <li
@@ -55,12 +51,9 @@ export default function SuspenseBreadcrumbs(): React$Node {
             aria-current="true">
             <button
               className={styles.SuspenseBreadcrumbsButton}
-              onClick={handleClick.bind(
-                null,
-                activityID === null ? roots[0] : activityID,
-              )}
+              onClick={handleClick.bind(null, roots[0])}
               type="button">
-              {activityID === null ? 'Initial Paint' : 'Transition'}
+              Initial Paint
             </button>
           </li>
         ) : null

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js

@@ -9,7 +9,6 @@
 
 import type Store from 'react-devtools-shared/src/devtools/store';
 import type {
-  Element,
   SuspenseNode,
   Rect,
 } from 'react-devtools-shared/src/frontend/types';
@@ -19,7 +18,7 @@ import typeof {
 } from 'react-dom-bindings/src/events/SyntheticEvent';
 
 import * as React from 'react';
-import {createContext, useContext, useLayoutEffect, useMemo} from 'react';
+import {createContext, useContext, useLayoutEffect} from 'react';
 import {
   TreeDispatcherContext,
   TreeStateContext,
@@ -427,30 +426,6 @@ function SuspenseRectsRoot({rootID}: {rootID: SuspenseNode['id']}): React$Node {
   });
 }
 
-function SuspenseRectsInitialPaint(): React$Node {
-  const {roots} = useContext(SuspenseTreeStateContext);
-  return roots.map(rootID => {
-    return <SuspenseRectsRoot key={rootID} rootID={rootID} />;
-  });
-}
-
-function SuspenseRectsTransition({id}: {id: Element['id']}): React$Node {
-  const store = useContext(StoreContext);
-  const children = useMemo(() => {
-    return store.getSuspenseChildren(id);
-  }, [id, store]);
-
-  return children.map(suspenseID => {
-    return (
-      <SuspenseRects
-        key={suspenseID}
-        suspenseID={suspenseID}
-        parentRects={null}
-      />
-    );
-  });
-}
-
 const ViewBox = createContext<Rect>((null: any));
 
 function SuspenseRectsContainer({
@@ -459,25 +434,14 @@ function SuspenseRectsContainer({
   scaleRef: {current: number},
 }): React$Node {
   const store = useContext(StoreContext);
-  const {activityID, inspectedElementID} = useContext(TreeStateContext);
+  const {inspectedElementID} = useContext(TreeStateContext);
   const treeDispatch = useContext(TreeDispatcherContext);
   const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
   // TODO: This relies on a full re-render of all children when the Suspense tree changes.
   const {roots, timeline, hoveredTimelineIndex, uniqueSuspendersOnly} =
     useContext(SuspenseTreeStateContext);
 
-  const activityChildren: $ReadOnlyArray<SuspenseNode['id']> | null =
-    useMemo(() => {
-      if (activityID === null) {
-        return null;
-      }
-      return store.getSuspenseChildren(activityID);
-    }, [activityID, store]);
-  const transitionChildren =
-    activityChildren === null ? roots : activityChildren;
-
-  // We're using the bounding box of the entire document to anchor the Transition
-  // in the actual document.
+  // TODO: bbox does not consider uniqueSuspendersOnly filter
   const boundingBox = getDocumentBoundingRect(store, roots);
 
   const boundingBoxWidth = boundingBox.width;
@@ -492,18 +456,14 @@ function SuspenseRectsContainer({
       // Already clicked on an inner rect
       return;
     }
-    if (transitionChildren.length === 0) {
+    if (roots.length === 0) {
       // Nothing to select
       return;
     }
     const arbitraryRootID = roots[0];
-    const transitionRoot = activityID === null ? arbitraryRootID : activityID;
 
     event.preventDefault();
-    treeDispatch({
-      type: 'SELECT_ELEMENT_BY_ID',
-      payload: transitionRoot,
-    });
+    treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: arbitraryRootID});
     suspenseTreeDispatch({
       type: 'SET_SUSPENSE_LINEAGE',
       payload: arbitraryRootID,
@@ -523,8 +483,7 @@ function SuspenseRectsContainer({
   }
 
   const isRootSelected = roots.includes(inspectedElementID);
-  // When we're focusing a Transition, the first timeline step will not be a root.
-  const isRootHovered = activityID === null && hoveredTimelineIndex === 0;
+  const isRootHovered = hoveredTimelineIndex === 0;
 
   let hasRootSuspenders = false;
   if (!uniqueSuspendersOnly) {
@@ -577,13 +536,7 @@ function SuspenseRectsContainer({
     <div
       className={
         styles.SuspenseRectsContainer +
-        (hasRootSuspenders &&
-        // We don't want to draw attention to the root if we're looking at a Transition.
-        // TODO: Draw bounding rect of Transition and check if the Transition
-        // has unique suspenders.
-        activityID === null
-          ? ' ' + styles.SuspenseRectsRoot
-          : '') +
+        (hasRootSuspenders ? ' ' + styles.SuspenseRectsRoot : '') +
         (isRootSelected ? ' ' + styles.SuspenseRectsRootOutline : '') +
         ' ' +
         getClassNameForEnvironment(rootEnvironment)
@@ -595,11 +548,9 @@ function SuspenseRectsContainer({
         <div
           className={styles.SuspenseRectsViewBox}
           style={{aspectRatio, width}}>
-          {activityID === null ? (
-            <SuspenseRectsInitialPaint />
-          ) : (
-            <SuspenseRectsTransition id={activityID} />
-          )}
+          {roots.map(rootID => {
+            return <SuspenseRectsRoot key={rootID} rootID={rootID} />;
+          })}
           {selectedBoundingBox !== null ? (
             <ScaledRect
               className={

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseScrubber.js

@@ -12,15 +12,13 @@ import type {SuspenseTimelineStep} from 'react-devtools-shared/src/frontend/type
 import typeof {SyntheticEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
 
 import * as React from 'react';
-import {useContext, useRef} from 'react';
-import {ElementTypeRoot} from 'react-devtools-shared/src/frontend/types';
+import {useRef} from 'react';
 
 import styles from './SuspenseScrubber.css';
 
 import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js';
 
 import Tooltip from '../Components/reach-ui/tooltip';
-import {StoreContext} from '../context';
 
 export default function SuspenseScrubber({
   min,
@@ -45,7 +43,6 @@ export default function SuspenseScrubber({
   onHoverSegment: (index: number) => void,
   onHoverLeave: () => void,
 }): React$Node {
-  const store = useContext(StoreContext);
   const inputRef = useRef();
   function handleChange(event: SyntheticEvent) {
     const newValue = +event.currentTarget.value;
@@ -63,16 +60,12 @@ export default function SuspenseScrubber({
   }
   const steps = [];
   for (let index = min; index <= max; index++) {
-    const step = timeline[index];
-    const environment = step.environment;
-    const element = store.getElementByID(step.id);
+    const environment = timeline[index].environment;
     const label =
       index === min
         ? // The first step in the timeline is always a Transition (Initial Paint).
-          element === null || element.type === ElementTypeRoot
-          ? 'Initial Paint'
-          : 'Transition' +
-            (environment === null ? '' : ' (' + environment + ')')
+          'Initial Paint' +
+          (environment === null ? '' : ' (' + environment + ')')
         : // TODO: Consider adding the name of this specific boundary if this step has only one.
           environment === null
           ? 'Suspense'