[compiler] Remove single line constraint and improve overall capturing logic

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

@@ -5,91 +5,52 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {TypeOf} from 'zod';
-import {CompilerError, Effect, ErrorSeverity, SourceLocation} from '..';
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  Effect,
+  ErrorSeverity,
+  SourceLocation,
+} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {
   ArrayExpression,
+  BasicBlock,
   BlockId,
   FunctionExpression,
   HIRFunction,
   IdentifierId,
-  InstructionValue,
+  Instruction,
   Place,
   isSetStateType,
   isUseEffectHookType,
+  isUseStateType,
+  GeneratedSource,
 } from '../HIR';
-import {printInstruction, printPlace} from '../HIR/PrintHIR';
-import {
-  eachInstructionValueOperand,
-  eachInstructionOperand,
-  eachTerminalOperand,
-  eachInstructionLValue,
-} from '../HIR/visitors';
+import {eachInstructionOperand, eachInstructionLValue} from '../HIR/visitors';
 import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables';
 import {assertExhaustive} from '../Utils/utils';
 
 type SetStateCall = {
   loc: SourceLocation;
-  propsSources: Place[] | undefined; // undefined means state-derived, defined means props-derived
+  derivedDep: DerivationMetadata;
+  setStateId: IdentifierId;
 };
+
 type TypeOfValue = 'ignored' | 'fromProps' | 'fromState' | 'fromPropsOrState';
 
 type DerivationMetadata = {
-  identifierPlace: Place;
-  sources: Place[];
   typeOfValue: TypeOfValue;
+  place: Place;
+  sources: Set<Place>;
 };
 
-function joinValue(
-  lvalueType: TypeOfValue,
-  valueType: TypeOfValue,
-): TypeOfValue {
-  if (lvalueType === 'ignored') return valueType;
-  if (valueType === 'ignored') return lvalueType;
-  if (lvalueType === valueType) return lvalueType;
-  return 'fromPropsOrState';
-}
-
-function propagateDerivation(
-  dest: Place,
-  source: Place | undefined,
-  derivedFromProps: Map<IdentifierId, Place>,
-) {
-  if (source === undefined) {
-    return;
-  }
-
-  if (source.identifier.name?.kind === 'promoted') {
-    derivedFromProps.set(dest.identifier.id, dest);
-  } else {
-    derivedFromProps.set(dest.identifier.id, source);
-  }
-}
-
-function updateDerivationMetadata(
-  target: Place,
-  sources: DerivationMetadata[],
-  typeOfValue: TypeOfValue,
-  derivedTuple: Map<IdentifierId, DerivationMetadata>,
-): void {
-  let newValue: DerivationMetadata = {
-    identifierPlace: target,
-    sources: [],
-    typeOfValue: typeOfValue,
-  };
-
-  for (const source of sources) {
-    // If the identifier of the source is a promoted identifier, then
-    // we should set the source as the first named identifier.
-    if (source.identifierPlace.identifier.name?.kind === 'promoted') {
-      newValue.sources.push(target);
-    } else {
-      newValue.sources.push(...source.sources);
-    }
-  }
-  derivedTuple.set(target.identifier.id, newValue);
-}
+type ErrorMetadata = {
+  type: TypeOfValue;
+  description: string | undefined;
+  loc: SourceLocation;
+  setStateName: string | undefined | null;
+};
 
 /**
  * Validates that useEffect is not used for derived computations which could/should
@@ -118,24 +79,22 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
   const candidateDependencies: Map<IdentifierId, ArrayExpression> = new Map();
   const functions: Map<IdentifierId, FunctionExpression> = new Map();
   const locals: Map<IdentifierId, IdentifierId> = new Map();
+  const derivationCache: Map<IdentifierId, DerivationMetadata> = new Map();
 
-  // MY take on this
-  const valueToType: Map<IdentifierId, TypeOfValue> = new Map();
-  const valueToSourceProps: Map<IdentifierId, Set<Place>> = new Map();
-  const valueToSourceStates: Map<IdentifierId, Set<Place>> = new Map();
-  const valueToSources: Map<IdentifierId, Set<Place>> = new Map();
+  const effectSetStates: Map<
+    string | undefined | null,
+    Array<Place>
+  > = new Map();
+  const setStateCalls: Map<string | undefined | null, Array<Place>> = new Map();
 
-  // Sources are still probably not correct
-  const derivedTuple: Map<IdentifierId, DerivationMetadata> = new Map();
-
-  const errors = new CompilerError();
+  const errors: Array<ErrorMetadata> = [];
 
   if (fn.fnType === 'Hook') {
     for (const param of fn.params) {
       if (param.kind === 'Identifier') {
-        derivedTuple.set(param.identifier.id, {
-          identifierPlace: param,
-          sources: [param],
+        derivationCache.set(param.identifier.id, {
+          place: param,
+          sources: new Set([param]),
           typeOfValue: 'fromProps',
         });
       }
@@ -143,113 +102,22 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
   } else if (fn.fnType === 'Component') {
     const props = fn.params[0];
     if (props != null && props.kind === 'Identifier') {
-      derivedTuple.set(props.identifier.id, {
-        identifierPlace: props,
-        sources: [props],
+      derivationCache.set(props.identifier.id, {
+        place: props,
+        sources: new Set([props]),
         typeOfValue: 'fromProps',
       });
     }
   }
 
   for (const block of fn.body.blocks.values()) {
-    for (const phi of block.phis) {
-      for (const operand of phi.operands.values()) {
-        const source = derivedTuple.get(operand.identifier.id);
-        if (source !== undefined && source.typeOfValue === 'fromProps') {
-          if (
-            source.identifierPlace.identifier.name === null ||
-            source.identifierPlace.identifier.name?.kind === 'promoted'
-          ) {
-            derivedTuple.set(phi.place.identifier.id, {
-              identifierPlace: phi.place,
-              sources: [phi.place],
-              typeOfValue: 'fromProps',
-            });
-          } else {
-            derivedTuple.set(phi.place.identifier.id, {
-              identifierPlace: phi.place,
-              sources: source.sources,
-              typeOfValue: 'fromProps',
-            });
-          }
-        }
-      }
-    }
+    parseBlockPhi(block, derivationCache);
 
     for (const instr of block.instructions) {
       const {lvalue, value} = instr;
 
-      // This needs to be repeated "recursively" on FunctionExpressions
-      // HERE >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
-      // DERIVATION LOGIC-----------------------------------------------------
-      console.log('instr', printInstruction(instr));
-      console.log('instr', instr);
-      // console.log('instr lValue', instr.lvalue);
+      parseInstr(instr, derivationCache, setStateCalls);
 
-      let typeOfValue: TypeOfValue = 'ignored';
-
-      // TODO: Add handling for state derived props
-      let sources: DerivationMetadata[] = [];
-      for (const operand of eachInstructionValueOperand(value)) {
-        const opSource = derivedTuple.get(operand.identifier.id);
-        if (opSource === undefined) {
-          continue;
-        }
-
-        typeOfValue = joinValue(typeOfValue, opSource.typeOfValue);
-        sources.push(opSource);
-      }
-
-      // TODO: Add handling for state derived props
-      if (typeOfValue !== 'ignored') {
-        for (const lvalue of eachInstructionLValue(instr)) {
-          updateDerivationMetadata(lvalue, sources, typeOfValue, derivedTuple);
-        }
-
-        for (const operand of eachInstructionValueOperand(value)) {
-          switch (operand.effect) {
-            case Effect.Capture:
-            case Effect.Store:
-            case Effect.ConditionallyMutate:
-            case Effect.ConditionallyMutateIterator:
-            case Effect.Mutate: {
-              if (isMutable(instr, operand)) {
-                updateDerivationMetadata(
-                  operand,
-                  sources,
-                  typeOfValue,
-                  derivedTuple,
-                );
-              }
-              break;
-            }
-            case Effect.Freeze:
-            case Effect.Read: {
-              // no-op
-              break;
-            }
-            case Effect.Unknown: {
-              CompilerError.invariant(false, {
-                reason: 'Unexpected unknown effect',
-                description: null,
-                loc: operand.loc,
-                suggestions: null,
-              });
-            }
-            default: {
-              assertExhaustive(
-                operand.effect,
-                `Unexpected effect kind \`${operand.effect}\``,
-              );
-            }
-          }
-        }
-      }
-      console.log('derivedTuple', derivedTuple);
-      // HERE >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
-
-      // console.log('derivedTuple', derivedTuple);
-      // DERIVATION LOGIC-----------------------------------------------------
       if (value.kind === 'LoadLocal') {
         locals.set(lvalue.identifier.id, value.place.identifier.id);
       } else if (value.kind === 'ArrayExpression') {
@@ -263,7 +131,6 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
         const callee =
           value.kind === 'CallExpression' ? value.callee : value.property;
 
-        // This is a useEffect hook
         if (
           isUseEffectHookType(callee.identifier) &&
           value.args.length === 2 &&
@@ -295,7 +162,8 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
             validateEffect(
               effectFunction.loweredFunc.func,
               dependencies,
-              derivedTuple,
+              derivationCache,
+              effectSetStates,
               errors,
             );
           }
@@ -303,64 +171,294 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
       }
     }
   }
-  if (errors.hasAnyErrors()) {
-    throw errors;
+
+  const compilerError = generateCompilerError(
+    setStateCalls,
+    effectSetStates,
+    errors,
+  );
+
+  if (compilerError.hasErrors()) {
+    throw compilerError;
+  }
+}
+
+function generateCompilerError(
+  setStateCalls: Map<string | undefined | null, Array<Place>>,
+  effectSetStates: Map<string | undefined | null, Array<Place>>,
+  errors: Array<ErrorMetadata>,
+): CompilerError {
+  const throwableErrors = new CompilerError();
+  for (const error of errors) {
+    let compilerDiagnostic: CompilerDiagnostic | undefined = undefined;
+    let detailMessage = '';
+    switch (error.type) {
+      case 'fromProps':
+        detailMessage = 'This state value shadows a value passed as a prop.';
+        break;
+      case 'fromPropsOrState':
+        detailMessage =
+          'This state value shadows a value passed as a prop or a value from state.';
+        break;
+    }
+
+    /*
+     * If we use a setState from an invalid useEffect elsewhere then we probably have to
+     * hoist state up, else we should calculate in render
+     */
+    if (
+      setStateCalls.get(error.setStateName)?.length !=
+        effectSetStates.get(error.setStateName)?.length &&
+      error.type !== 'fromState'
+    ) {
+      compilerDiagnostic = CompilerDiagnostic.create({
+        description: `${error.description} This state value shadows a value passed as a prop. Instead of shadowing the prop with local state, hoist the state to the parent component and update it there.`,
+        category: `Local state shadows parent state.`,
+        severity: ErrorSeverity.InvalidReact,
+      }).withDetail({
+        kind: 'error',
+        loc: error.loc,
+        message: 'this setState synchronizes the state',
+      });
+
+      for (const [key, setStateCallArray] of effectSetStates) {
+        if (setStateCallArray.length === 0) {
+          continue;
+        }
+
+        const nonUseEffectSetStateCalls = setStateCalls.get(key);
+        if (nonUseEffectSetStateCalls) {
+          for (const place of nonUseEffectSetStateCalls) {
+            if (!setStateCallArray.includes(place)) {
+              compilerDiagnostic.withDetail({
+                kind: 'error',
+                loc: place.loc,
+                message:
+                  'this setState updates the shadowed state, but should call an onChange event from the parent',
+              });
+            }
+          }
+        }
+      }
+    } else {
+      compilerDiagnostic = CompilerDiagnostic.create({
+        description: `${error.description} Derived values should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.`,
+        category: `Derive values in render, not effects.`,
+        severity: ErrorSeverity.InvalidReact,
+      }).withDetail({
+        kind: 'error',
+        loc: error.loc,
+        message: 'This should be computed during render, not in an effect',
+      });
+    }
+
+    if (compilerDiagnostic) {
+      throwableErrors.pushDiagnostic(compilerDiagnostic);
+    }
+  }
+
+  return throwableErrors;
+}
+
+function joinValue(
+  lvalueType: TypeOfValue,
+  valueType: TypeOfValue,
+): TypeOfValue {
+  if (lvalueType === 'ignored') return valueType;
+  if (valueType === 'ignored') return lvalueType;
+  if (lvalueType === valueType) return lvalueType;
+  return 'fromPropsOrState';
+}
+
+function updateDerivationMetadata(
+  target: Place,
+  sources: Array<DerivationMetadata> | undefined,
+  typeOfValue: TypeOfValue | undefined,
+  derivationCache: Map<IdentifierId, DerivationMetadata>,
+): void {
+  let newValue: DerivationMetadata = {
+    place: target,
+    sources: new Set(),
+    typeOfValue: typeOfValue ?? 'ignored',
+  };
+
+  if (sources !== undefined) {
+    for (const source of sources) {
+      /*
+       * If the identifier of the source is a promoted identifier, then
+       *  we should set the target as the source.
+       */
+      for (const place of source.sources) {
+        if (
+          place.identifier.name === null ||
+          place.identifier.name?.kind === 'promoted'
+        ) {
+          newValue.sources.add(target);
+        } else {
+          newValue.sources.add(place);
+        }
+      }
+    }
+  }
+
+  derivationCache.set(target.identifier.id, newValue);
+}
+
+function parseInstr(
+  instr: Instruction,
+  derivationCache: Map<IdentifierId, DerivationMetadata>,
+  setStateCalls: Map<string | undefined | null, Array<Place>>,
+): void {
+  // Recursively parse function expressions
+  if (instr.value.kind === 'FunctionExpression') {
+    for (const [, block] of instr.value.loweredFunc.func.body.blocks) {
+      for (const instr of block.instructions) {
+        parseInstr(instr, derivationCache, setStateCalls);
+      }
+    }
+  }
+
+  let typeOfValue: TypeOfValue = 'ignored';
+
+  // Catch any useState hook calls
+  let sources: Array<DerivationMetadata> = [];
+  if (
+    instr.value.kind === 'Destructure' &&
+    instr.value.lvalue.pattern.kind === 'ArrayPattern' &&
+    isUseStateType(instr.value.value.identifier)
+  ) {
+    typeOfValue = 'fromState';
+
+    const stateValueSource = instr.value.lvalue.pattern.items[0];
+    if (stateValueSource.kind === 'Identifier') {
+      sources.push({
+        place: stateValueSource,
+        typeOfValue: typeOfValue,
+        sources: new Set([stateValueSource]),
+      });
+    }
+  }
+
+  if (
+    instr.value.kind === 'CallExpression' &&
+    isSetStateType(instr.value.callee.identifier) &&
+    instr.value.args.length === 1 &&
+    instr.value.args[0].kind === 'Identifier' &&
+    instr.value.callee.loc !== GeneratedSource
+  ) {
+    if (setStateCalls.has(instr.value.callee.loc.identifierName)) {
+      setStateCalls
+        .get(instr.value.callee.loc.identifierName)!
+        .push(instr.value.callee);
+    } else {
+      setStateCalls.set(instr.value.callee.loc.identifierName, [
+        instr.value.callee,
+      ]);
+    }
+  }
+
+  for (const operand of eachInstructionOperand(instr)) {
+    const opSource = derivationCache.get(operand.identifier.id);
+    if (opSource === undefined) {
+      continue;
+    }
+
+    typeOfValue = joinValue(typeOfValue, opSource.typeOfValue);
+    sources.push(opSource);
+  }
+
+  if (typeOfValue !== 'ignored') {
+    for (const lvalue of eachInstructionLValue(instr)) {
+      updateDerivationMetadata(lvalue, sources, typeOfValue, derivationCache);
+    }
+
+    for (const operand of eachInstructionOperand(instr)) {
+      switch (operand.effect) {
+        case Effect.Capture:
+        case Effect.Store:
+        case Effect.ConditionallyMutate:
+        case Effect.ConditionallyMutateIterator:
+        case Effect.Mutate: {
+          if (isMutable(instr, operand)) {
+            updateDerivationMetadata(
+              operand,
+              sources,
+              typeOfValue,
+              derivationCache,
+            );
+          }
+          break;
+        }
+        case Effect.Freeze:
+        case Effect.Read: {
+          // no-op
+          break;
+        }
+        case Effect.Unknown: {
+          CompilerError.invariant(false, {
+            reason: 'Unexpected unknown effect',
+            description: null,
+            loc: operand.loc,
+            suggestions: null,
+          });
+        }
+        default: {
+          assertExhaustive(
+            operand.effect,
+            `Unexpected effect kind \`${operand.effect}\``,
+          );
+        }
+      }
+    }
+  }
+}
+
+function parseBlockPhi(
+  block: BasicBlock,
+  derivationCache: Map<IdentifierId, DerivationMetadata>,
+): void {
+  for (const phi of block.phis) {
+    for (const operand of phi.operands.values()) {
+      const phiSource = derivationCache.get(operand.identifier.id);
+      if (phiSource !== undefined) {
+        updateDerivationMetadata(
+          phi.place,
+          [phiSource],
+          phiSource?.typeOfValue,
+          derivationCache,
+        );
+      }
+    }
   }
 }
 
 function validateEffect(
   effectFunction: HIRFunction,
   effectDeps: Array<IdentifierId>,
-  derivedTuple: Map<IdentifierId, DerivationMetadata>,
-  errors: CompilerError,
+  derivationCache: Map<IdentifierId, DerivationMetadata>,
+  effectSetStates: Map<string | undefined | null, Array<Place>>,
+  errors: Array<ErrorMetadata>,
 ): void {
-  for (const operand of effectFunction.context) {
-    if (isSetStateType(operand.identifier)) {
-      continue;
-    } else if (effectDeps.find(dep => dep === operand.identifier.id) != null) {
-      continue;
-    } else if (derivedTuple.has(operand.identifier.id)) {
-      continue;
-    } else {
-      // Captured something other than the effect dep or setState
-      console.log('early return 1');
-      return;
-    }
-  }
-
-  // This might be wrong gotta double check
-  let hasInvalidDep = false;
+  let isUsingDerivedDeps = false;
   for (const dep of effectDeps) {
-    const depMetadata = derivedTuple.get(dep);
+    const depMetadata = derivationCache.get(dep);
     if (
       effectFunction.context.find(operand => operand.identifier.id === dep) !=
         null ||
       (depMetadata !== undefined && depMetadata.typeOfValue !== 'ignored')
     ) {
-      hasInvalidDep = true;
+      isUsingDerivedDeps = true;
     }
   }
 
-  if (!hasInvalidDep) {
-    console.log('early return 2');
-    // effect dep wasn't actually used in the function
+  if (!isUsingDerivedDeps) {
+    // no prop/state derived deps were used in the body of the effect
     return;
   }
 
   const seenBlocks: Set<BlockId> = new Set();
-  // This variable is suspicious maybe we don't need it?
-  const values: Map<IdentifierId, Array<IdentifierId>> = new Map();
-  const effectInvalidlyDerived: Map<IdentifierId, Place[]> = new Map();
 
-  for (const dep of effectDeps) {
-    values.set(dep, [dep]);
-    const depMetadata = derivedTuple.get(dep);
-    if (depMetadata !== undefined) {
-      effectInvalidlyDerived.set(dep, depMetadata.sources);
-    }
-  }
-
-  const setStateCalls: Array<SetStateCall> = [];
+  const derivedSetStateCall: Array<SetStateCall> = [];
   for (const block of effectFunction.body.blocks.values()) {
     for (const pred of block.preds) {
       if (!seenBlocks.has(pred)) {
@@ -369,33 +467,28 @@ function validateEffect(
       }
     }
 
-    // TODO: This might need editing
-    for (const phi of block.phis) {
-      const aggregateDeps: Set<IdentifierId> = new Set();
-      let propsSources: Place[] | null = null;
-
-      for (const operand of phi.operands.values()) {
-        const deps = values.get(operand.identifier.id);
-        if (deps != null) {
-          for (const dep of deps) {
-            aggregateDeps.add(dep);
-          }
-        }
-        const sources = effectInvalidlyDerived.get(operand.identifier.id);
-        if (sources != null) {
-          propsSources = sources;
-        }
-      }
-
-      if (aggregateDeps.size !== 0) {
-        values.set(phi.place.identifier.id, Array.from(aggregateDeps));
-      }
-      if (propsSources != null) {
-        effectInvalidlyDerived.set(phi.place.identifier.id, propsSources);
-      }
-    }
+    parseBlockPhi(block, derivationCache);
 
     for (const instr of block.instructions) {
+      if (
+        instr.value.kind === 'CallExpression' &&
+        isSetStateType(instr.value.callee.identifier) &&
+        instr.value.args.length === 1 &&
+        instr.value.args[0].kind === 'Identifier' &&
+        instr.value.callee.loc !== GeneratedSource &&
+        instr.value.callee.loc.identifierName !== undefined &&
+        instr.value.callee.loc.identifierName !== null
+      ) {
+        if (effectSetStates.has(instr.value.callee.loc.identifierName)) {
+          effectSetStates
+            .get(instr.value.callee.loc.identifierName)!
+            .push(instr.value.callee);
+        } else {
+          effectSetStates.set(instr.value.callee.loc.identifierName, [
+            instr.value.callee,
+          ]);
+        }
+      }
       switch (instr.value.kind) {
         case 'Primitive':
         case 'JSXText':
@@ -403,10 +496,6 @@ function validateEffect(
           break;
         }
         case 'LoadLocal': {
-          const deps = values.get(instr.value.place.identifier.id);
-          if (deps != null) {
-            values.set(instr.lvalue.identifier.id, deps);
-          }
           break;
         }
         case 'ComputedLoad':
@@ -415,95 +504,56 @@ function validateEffect(
         case 'TemplateLiteral':
         case 'CallExpression':
         case 'MethodCall': {
-          const aggregateDeps: Set<IdentifierId> = new Set();
-          for (const operand of eachInstructionOperand(instr)) {
-            const deps = values.get(operand.identifier.id);
-            if (deps != null) {
-              for (const dep of deps) {
-                aggregateDeps.add(dep);
-              }
-            }
-          }
-          if (aggregateDeps.size !== 0) {
-            values.set(instr.lvalue.identifier.id, Array.from(aggregateDeps));
-          }
-
           if (
             instr.value.kind === 'CallExpression' &&
             isSetStateType(instr.value.callee.identifier) &&
             instr.value.args.length === 1 &&
             instr.value.args[0].kind === 'Identifier'
           ) {
-            const deps = values.get(instr.value.args[0].identifier.id);
-            console.log('deps', deps);
-            if (deps != null && new Set(deps).size === effectDeps.length) {
-              // console.log('setState arg', instr.value.args[0].identifier.id);
-              // console.log('effectInvalidlyDerived', effectInvalidlyDerived);
-              // console.log('derivedTuple', derivedTuple);
-              const propSources = derivedTuple.get(
-                instr.value.args[0].identifier.id,
-              );
+            const derivedDep = derivationCache.get(
+              instr.value.args[0].identifier.id,
+            );
 
-              console.log('Final reference', propSources);
-              if (propSources !== undefined) {
-                setStateCalls.push({
-                  loc: instr.value.callee.loc,
-                  propsSources: propSources.sources,
-                });
-              } else {
-                setStateCalls.push({
-                  loc: instr.value.callee.loc,
-                  propsSources: undefined,
-                });
-              }
-            } else {
-              // doesn't depend on all deps
-              console.log('early return 3');
-              return;
+            if (derivedDep !== undefined) {
+              derivedSetStateCall.push({
+                loc: instr.value.callee.loc,
+                setStateId: instr.value.callee.identifier.id,
+                derivedDep: derivedDep,
+              });
             }
           }
           break;
         }
-        default: {
-          console.log('early return 4');
-          return;
-        }
-      }
-    }
-    for (const operand of eachTerminalOperand(block.terminal)) {
-      if (values.has(operand.identifier.id)) {
-        return;
       }
     }
+
     seenBlocks.add(block.id);
   }
 
-  console.log('setStateCalls', setStateCalls);
-  for (const call of setStateCalls) {
-    if (call.propsSources != null) {
-      const propNames = call.propsSources
-        .map(place => place.identifier.name?.value)
-        .join(', ');
-      const propInfo = propNames != null ? ` (from props '${propNames}')` : '';
+  for (const call of derivedSetStateCall) {
+    const placeNames = Array.from(call.derivedDep.sources)
+      .map(place => {
+        return place.identifier.name?.value;
+      })
+      .filter(Boolean)
+      .join(', ');
 
-      errors.push({
-        reason: `Consider lifting state up to the parent component to make this a controlled component. (https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes)`,
-        description: `You are using props${propInfo} to update local state in an effect.`,
-        severity: ErrorSeverity.InvalidReact,
-        loc: call.loc,
-        suggestions: null,
-      });
+    let errorDescription = '';
+
+    if (call.derivedDep.typeOfValue === 'fromProps') {
+      errorDescription = `props [${placeNames}].`;
+    } else if (call.derivedDep.typeOfValue === 'fromState') {
+      errorDescription = `local state [${placeNames}].`;
     } else {
-      errors.push({
-        reason:
-          'You may not need this effect. Values derived from state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)',
-        description:
-          'This effect updates state based on other state values. ' +
-          'Consider calculating this value directly during render',
-        severity: ErrorSeverity.InvalidReact,
-        loc: call.loc,
-        suggestions: null,
-      });
+      errorDescription = `both props and local state [${placeNames}].`;
     }
+
+    errors.push({
+      type: call.derivedDep.typeOfValue,
+      description: `This setState() appears to derive a value from ${errorDescription}`,
+      loc: call.loc,
+      setStateName:
+        call.loc !== GeneratedSource ? call.loc.identifierName : undefined,
+    });
   }
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/derived-state-with-conditional-no-error.expect.md

@@ -1,79 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects
-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
-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 }],
-};
-
-```
-      
-### Eval output
-(kind: ok) <div>test</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/derived-state-with-side-effects-no-error.expect.md

@@ -1,74 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects
-import {useEffect, useState} from 'react';
-
-function Component({value}) {
-  const [localValue, setLocalValue] = useState('');
-
-  useEffect(() => {
-    console.log('Value changed:', value);
-    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
-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 = () => {
-      console.log("Value changed:", value);
-      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" }],
-};
-
-```
-      
-### Eval output
-(kind: ok) <div>test</div>
-logs: ['Value changed:','test']

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.bug-derived-state-from-mixed-deps.expect.md

@@ -34,15 +34,15 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: You may not need this effect. Values derived from state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+Error: Derive values in render, not effects.
 
-This effect updates state based on other state values. Consider calculating this value directly during render.
+This setState() appears to derive a value from both props and local state [prefix, name]. Derived values should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
 
 error.bug-derived-state-from-mixed-deps.ts:9:4
    7 |
    8 |   useEffect(() => {
 >  9 |     setDisplayName(prefix + name);
-     |     ^^^^^^^^^^^^^^ You may not need this effect. Values derived from state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+     |     ^^^^^^^^^^^^^^ This should be computed during render, not in an effect
   10 |   }, [prefix, name]);
   11 |
   12 |   return (

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.derived-state-from-shadowed-props.expect.md

@@ -0,0 +1,58 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useState, useEffect} from 'react';
+
+function Component({props, number}) {
+  const nothing = 0;
+  const missDirection = number;
+  const [displayValue, setDisplayValue] = useState(props.prefix + missDirection + nothing);
+
+  useEffect(() => {
+    setDisplayValue(props.prefix + missDirection + nothing);
+  }, [props.prefix, missDirection, nothing]);
+
+  return (
+    <div
+      onClick={() => {
+        setDisplayValue('clicked');
+      }}>
+      {displayValue}
+    </div>
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Local state shadows parent state.
+
+This setState() appears to derive a value from props [props, number]. This state value shadows a value passed as a prop. Instead of shadowing the prop with local state, hoist the state to the parent component and update it there.
+
+error.derived-state-from-shadowed-props.ts:10:4
+   8 |
+   9 |   useEffect(() => {
+> 10 |     setDisplayValue(props.prefix + missDirection + nothing);
+     |     ^^^^^^^^^^^^^^^ this setState synchronizes the state
+  11 |   }, [props.prefix, missDirection, nothing]);
+  12 |
+  13 |   return (
+
+error.derived-state-from-shadowed-props.ts:16:8
+  14 |     <div
+  15 |       onClick={() => {
+> 16 |         setDisplayValue('clicked');
+     |         ^^^^^^^^^^^^^^^ this setState updates the shadowed state, but should call an onChange event from the parent
+  17 |       }}>
+  18 |       {displayValue}
+  19 |     </div>
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.derived-state-from-shadowed-props.js

@@ -0,0 +1,21 @@
+// @validateNoDerivedComputationsInEffects
+import {useState, useEffect} from 'react';
+
+function Component({props, number}) {
+  const nothing = 0;
+  const missDirection = number;
+  const [displayValue, setDisplayValue] = useState(props.prefix + missDirection + nothing);
+
+  useEffect(() => {
+    setDisplayValue(props.prefix + missDirection + nothing);
+  }, [props.prefix, missDirection, nothing]);
+
+  return (
+    <div
+      onClick={() => {
+        setDisplayValue('clicked');
+      }}>
+      {displayValue}
+    </div>
+  );
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.derived-state-with-conditional.expect.md

@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+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: Derive values in render, not effects.
+
+This setState() appears to derive a value from props [value]. Derived values should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.derived-state-with-conditional.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/useEffect/error.derived-state-with-side-effects.expect.md

@@ -0,0 +1,47 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function Component({value}) {
+  const [localValue, setLocalValue] = useState('');
+
+  useEffect(() => {
+    console.log('Value changed:', value);
+    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: Derive values in render, not effects.
+
+This setState() appears to derive a value from props [value]. Derived values should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.derived-state-with-side-effects.ts:9:4
+   7 |   useEffect(() => {
+   8 |     console.log('Value changed:', value);
+>  9 |     setLocalValue(value);
+     |     ^^^^^^^^^^^^^ This should be computed during render, not in an effect
+  10 |     document.title = `Value: ${value}`;
+  11 |   }, [value]);
+  12 |
+```
+          
+      

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

@@ -24,15 +24,15 @@ function BadExample() {
 ```
 Found 1 error:
 
-Error: You may not need this effect. Values derived from state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+Error: Derive values in render, not effects.
 
-This effect updates state based on other state values. Consider calculating this value directly during render.
+This setState() appears to derive a value from local state [firstName, lastName]. Derived values should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
 
 error.invalid-derived-computation-in-effect.ts:9:4
    7 |   const [fullName, setFullName] = useState('');
    8 |   useEffect(() => {
 >  9 |     setFullName(capitalize(firstName + ' ' + lastName));
-     |     ^^^^^^^^^^^ You may not need this effect. Values derived from state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+     |     ^^^^^^^^^^^ This should be computed during render, not in an effect
   10 |   }, [firstName, lastName]);
   11 |
   12 |   return <div>{fullName}</div>;

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

@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+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: Derive values in render, not effects.
+
+This setState() appears to derive a value from props [props]. Derived values should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.invalid-derived-state-from-props-computed.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/useEffect/error.invalid-derived-state-from-props-destructured.expect.md

@@ -5,19 +5,19 @@
 // @validateNoDerivedComputationsInEffects
 import {useEffect, useState} from 'react';
 
-function Component({user: {firstName, lastName}}) {
-  const [fullName, setFullName] = useState('');
+function Component({props}) {
+  const [fullName, setFullName] = useState(props.firstName + ' ' + props.lastName);
 
   useEffect(() => {
-    setFullName(firstName + ' ' + lastName);
-  }, [firstName, lastName]);
+    setFullName(props.firstName + ' ' + props.lastName);
+  }, [props.firstName, props.lastName]);
 
   return <div>{fullName}</div>;
 }
 
 export const FIXTURE_ENTRYPOINT = {
   fn: Component,
-  params: [{user: {firstName: 'John', lastName: 'Doe'}}],
+  params: [{firstName: 'John', lastName: 'Doe'}],
 };
 
 ```
@@ -28,16 +28,16 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: You may not need this effect. Values derived from state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+Error: Derive values in render, not effects.
 
-This effect updates state based on other state values. Consider calculating this value directly during render.
+This setState() appears to derive a value from props [props]. Derived values should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
 
 error.invalid-derived-state-from-props-destructured.ts:8:4
    6 |
    7 |   useEffect(() => {
->  8 |     setFullName(firstName + ' ' + lastName);
-     |     ^^^^^^^^^^^ You may not need this effect. Values derived from state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
-   9 |   }, [firstName, lastName]);
+>  8 |     setFullName(props.firstName + ' ' + props.lastName);
+     |     ^^^^^^^^^^^ This should be computed during render, not in an effect
+   9 |   }, [props.firstName, props.lastName]);
   10 |
   11 |   return <div>{fullName}</div>;
 ```

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

@@ -1,12 +1,12 @@
 // @validateNoDerivedComputationsInEffects
 import {useEffect, useState} from 'react';
 
-function Component({firstName, lastName}) {
-  const [fullName, setFullName] = useState('');
+function Component({props}) {
+  const [fullName, setFullName] = useState(props.firstName + ' ' + props.lastName);
 
   useEffect(() => {
-    setFullName(firstName + ' ' + lastName);
-  }, [firstName, lastName]);
+    setFullName(props.firstName + ' ' + props.lastName);
+  }, [props.firstName, props.lastName]);
 
   return <div>{fullName}</div>;
 }

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

@@ -28,15 +28,15 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: You may not need this effect. Values derived from state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+Error: Derive values in render, not effects.
 
-This effect updates state based on other state values. Consider calculating this value directly during render.
+This setState() appears to derive a value from props [firstName, lastName]. Derived values should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
 
 error.invalid-derived-state-from-props-in-effect.ts:8:4
    6 |
    7 |   useEffect(() => {
 >  8 |     setFullName(firstName + ' ' + lastName);
-     |     ^^^^^^^^^^^ You may not need this effect. Values derived from state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+     |     ^^^^^^^^^^^ This should be computed during render, not in an effect
    9 |   }, [firstName, lastName]);
   10 |
   11 |   return <div>{fullName}</div>;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.invalid-derived-state-from-props-with-default-value.expect.md

@@ -0,0 +1,43 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects
+
+export default function InProductLobbyGeminiCard(
+  input = 'empty',
+) {
+  const [currInput, setCurrInput] = useState(input);
+
+  useEffect(() => {
+    setCurrInput(input)
+  }, [input]);
+
+  return (
+    <div>{currInput}</div>
+  )
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Derive values in render, not effects.
+
+This setState() appears to derive a value from props [input]. Derived values should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
+
+error.invalid-derived-state-from-props-with-default-value.ts:9:4
+   7 |
+   8 |   useEffect(() => {
+>  9 |     setCurrInput(input)
+     |     ^^^^^^^^^^^^ This should be computed during render, not in an effect
+  10 |   }, [input]);
+  11 |
+  12 |   return (
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect/error.invalid-derived-state-from-props-with-default-value.js

@@ -0,0 +1,15 @@
+// @validateNoDerivedComputationsInEffects
+
+export default function InProductLobbyGeminiCard(
+  input = 'empty',
+) {
+  const [currInput, setCurrInput] = useState(input);
+
+  useEffect(() => {
+    setCurrInput(input)
+  }, [input]);
+
+  return (
+    <div>{currInput}</div>
+  )
+}

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

@@ -36,15 +36,15 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: You may not need this effect. Values derived from state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+Error: Derive values in render, not effects.
 
-This effect updates state based on other state values. Consider calculating this value directly during render.
+This setState() appears to derive a value from local state [firstName, lastName]. Derived values should be computed during render, rather than in effects. Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user.
 
 error.invalid-derived-state-from-state-in-effect.ts:10:4
    8 |
    9 |   useEffect(() => {
 > 10 |     setFullName(firstName + ' ' + lastName);
-     |     ^^^^^^^^^^^ You may not need this effect. Values derived from state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
+     |     ^^^^^^^^^^^ This should be computed during render, not in an effect
   11 |   }, [firstName, lastName]);
   12 |
   13 |   return (

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

@@ -1,72 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects
-import {useEffect, useState} from 'react';
-
-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
-import { useEffect, useState } from "react";
-
-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: "]" }],
-};
-
-```
-      
-### Eval output
-(kind: ok) <div>[test]</div>