[Compiler] Don't throw calculate in render if the blamed setter is used outside of the effect

Summary:
If the setter is used both inside and outside the effect then usually the solution is more complex and requires hoisting state up to a parent component since we can't just remove the local state.

To do this, we now have 2 caches that track setState usages (not just calls) since if the effect is passed as an argument or called outside the effect the solution gets more complex which we are trying to avoid for now

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

@@ -19,6 +19,9 @@ import {
   Instruction,
   isUseStateType,
   BasicBlock,
+  isUseRefType,
+  GeneratedSource,
+  SourceLocation,
 } from '../HIR';
 import {eachInstructionLValue, eachInstructionOperand} from '../HIR/visitors';
 import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables';
@@ -37,6 +40,8 @@ type ValidationContext = {
   readonly errors: CompilerError;
   readonly derivationCache: DerivationCache;
   readonly effects: Set<HIRFunction>;
+  readonly setStateCache: Map<string | undefined | null, Array<Place>>;
+  readonly effectSetStateCache: Map<string | undefined | null, Array<Place>>;
 };
 
 class DerivationCache {
@@ -147,11 +152,19 @@ export function validateNoDerivedComputationsInEffects_exp(
   const errors = new CompilerError();
   const effects: Set<HIRFunction> = new Set();
 
+  const setStateCache: Map<string | undefined | null, Array<Place>> = new Map();
+  const effectSetStateCache: Map<
+    string | undefined | null,
+    Array<Place>
+  > = new Map();
+
   const context: ValidationContext = {
     functions,
     errors,
     derivationCache,
     effects,
+    setStateCache,
+    effectSetStateCache,
   };
 
   if (fn.fnType === 'Hook') {
@@ -177,13 +190,16 @@ export function validateNoDerivedComputationsInEffects_exp(
     }
   }
 
+  let isFirstPass = true;
   do {
     for (const block of fn.body.blocks.values()) {
       recordPhiDerivations(block, context);
       for (const instr of block.instructions) {
-        recordInstructionDerivations(instr, context);
+        recordInstructionDerivations(instr, context, isFirstPass);
       }
     }
+
+    isFirstPass = false;
   } while (context.derivationCache.snapshot());
 
   for (const effect of effects) {
@@ -238,6 +254,7 @@ function joinValue(
 function recordInstructionDerivations(
   instr: Instruction,
   context: ValidationContext,
+  isFirstPass: boolean,
 ): void {
   let typeOfValue: TypeOfValue = 'ignored';
   const sources: Set<IdentifierId> = new Set();
@@ -246,7 +263,7 @@ function recordInstructionDerivations(
     context.functions.set(lvalue.identifier.id, value);
     for (const [, block] of value.loweredFunc.func.body.blocks) {
       for (const instr of block.instructions) {
-        recordInstructionDerivations(instr, context);
+        recordInstructionDerivations(instr, context, isFirstPass);
       }
     }
   } else if (value.kind === 'CallExpression' || value.kind === 'MethodCall') {
@@ -272,6 +289,18 @@ function recordInstructionDerivations(
   }
 
   for (const operand of eachInstructionOperand(instr)) {
+    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]);
+      }
+    }
+
     const operandMetadata = context.derivationCache.cache.get(
       operand.identifier.id,
     );
@@ -346,9 +375,11 @@ function validateEffect(
 
   const effectDerivedSetStateCalls: Array<{
     value: CallExpression;
+    loc: SourceLocation;
     sourceIds: Set<IdentifierId>;
   }> = [];
 
+  const globals: Set<IdentifierId> = new Set();
   for (const block of effectFunction.body.blocks.values()) {
     for (const pred of block.preds) {
       if (!seenBlocks.has(pred)) {
@@ -358,6 +389,28 @@ function validateEffect(
     }
 
     for (const instr of block.instructions) {
+      // Early return if any instruction is deriving a value from a ref
+      if (isUseRefType(instr.lvalue.identifier)) {
+        return;
+      }
+
+      for (const operand of eachInstructionOperand(instr)) {
+        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,
+            ]);
+          }
+        }
+      }
+
       if (
         instr.value.kind === 'CallExpression' &&
         isSetStateType(instr.value.callee.identifier) &&
@@ -371,22 +424,57 @@ function validateEffect(
         if (argMetadata !== undefined) {
           effectDerivedSetStateCalls.push({
             value: instr.value,
+            loc: instr.value.callee.loc,
             sourceIds: argMetadata.sourcesIds,
           });
         }
+      } else if (instr.value.kind === 'CallExpression') {
+        const calleeMetadata = context.derivationCache.cache.get(
+          instr.value.callee.identifier.id,
+        );
+
+        if (
+          calleeMetadata !== undefined &&
+          (calleeMetadata.typeOfValue === 'fromProps' ||
+            calleeMetadata.typeOfValue === 'fromPropsAndState')
+        ) {
+          // If the callee is a prop we can't confidently say that it should be derived in render
+          return;
+        }
+
+        if (globals.has(instr.value.callee.identifier.id)) {
+          // If the callee is a global we can't confidently say that it should be derived in render
+          return;
+        }
+      } else if (instr.value.kind === 'LoadGlobal') {
+        globals.add(instr.lvalue.identifier.id);
+        for (const operand of eachInstructionOperand(instr)) {
+          globals.add(operand.identifier.id);
+        }
       }
     }
     seenBlocks.add(block.id);
   }
 
   for (const derivedSetStateCall of effectDerivedSetStateCalls) {
-    context.errors.push({
-      category: ErrorCategory.EffectDerivationsOfState,
-      reason:
-        'Values derived from props and 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: null,
-      loc: derivedSetStateCall.value.callee.loc,
-      suggestions: null,
-    });
+    if (
+      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
+    ) {
+      context.errors.push({
+        category: ErrorCategory.EffectDerivationsOfState,
+        reason:
+          'Values derived from props and 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: null,
+        loc: derivedSetStateCall.value.callee.loc,
+        suggestions: null,
+      });
+    }
   }
 }

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

@@ -0,0 +1,84 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component({initialName}) {
+  const [name, setName] = useState('');
+
+  useEffect(() => {
+    setName(initialName);
+  }, [initialName]);
+
+  return (
+    <div>
+      <input value={name} onChange={e => setName(e.target.value)} />
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{initialName: 'John'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
+import { useEffect, useState } from "react";
+
+function Component(t0) {
+  const $ = _c(6);
+  const { initialName } = t0;
+  const [name, setName] = useState("");
+  let t1;
+  let t2;
+  if ($[0] !== initialName) {
+    t1 = () => {
+      setName(initialName);
+    };
+    t2 = [initialName];
+    $[0] = initialName;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = (e) => setName(e.target.value);
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== name) {
+    t4 = (
+      <div>
+        <input value={name} onChange={t3} />
+      </div>
+    );
+    $[4] = name;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ initialName: "John" }],
+};
+
+```
+      
+### 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-used-outside-effect-no-error.expect.md

@@ -0,0 +1,85 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function MockComponent({onSet}) {
+  return <div onClick={() => onSet('clicked')}>Mock Component</div>;
+}
+
+function Component({propValue}) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+  }, [propValue]);
+
+  return <MockComponent onSet={setValue} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
+import { useEffect, useState } from "react";
+
+function MockComponent(t0) {
+  const $ = _c(2);
+  const { onSet } = t0;
+  let t1;
+  if ($[0] !== onSet) {
+    t1 = <div onClick={() => onSet("clicked")}>Mock Component</div>;
+    $[0] = onSet;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+function Component(t0) {
+  const $ = _c(4);
+  const { propValue } = t0;
+  const [, setValue] = useState(null);
+  let t1;
+  let t2;
+  if ($[0] !== propValue) {
+    t1 = () => {
+      setValue(propValue);
+    };
+    t2 = [propValue];
+    $[0] = propValue;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <MockComponent onSet={setValue} />;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propValue: "test" }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>Mock Component</div>

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

@@ -0,0 +1,73 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState, useRef} from 'react';
+
+export default function Component({test}) {
+  const [local, setLocal] = useState('');
+
+  const myRef = useRef(null);
+
+  useEffect(() => {
+    setLocal(myRef.current + test);
+  }, [test]);
+
+  return <>{local}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{test: 'testString'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
+import { useEffect, useState, useRef } from "react";
+
+export default function Component(t0) {
+  const $ = _c(5);
+  const { test } = t0;
+  const [local, setLocal] = useState("");
+
+  const myRef = useRef(null);
+  let t1;
+  let t2;
+  if ($[0] !== test) {
+    t1 = () => {
+      setLocal(myRef.current + test);
+    };
+    t2 = [test];
+    $[0] = test;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== local) {
+    t3 = <>{local}</>;
+    $[3] = local;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ test: "testString" }],
+};
+
+```
+      
+### 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

@@ -0,0 +1,19 @@
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState, useRef} from 'react';
+
+export default function Component({test}) {
+  const [local, setLocal] = useState('');
+
+  const myRef = useRef(null);
+
+  useEffect(() => {
+    setLocal(myRef.current + test);
+  }, [test]);
+
+  return <>{local}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{test: 'testString'}],
+};

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

@@ -0,0 +1,75 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component({propValue, onChange}) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+    onChange();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test', onChange: () => {}}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
+import { useEffect, useState } from "react";
+
+function Component(t0) {
+  const $ = _c(7);
+  const { propValue, onChange } = t0;
+  const [value, setValue] = useState(null);
+  let t1;
+  if ($[0] !== onChange || $[1] !== propValue) {
+    t1 = () => {
+      setValue(propValue);
+      onChange();
+    };
+    $[0] = onChange;
+    $[1] = propValue;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== propValue) {
+    t2 = [propValue];
+    $[3] = propValue;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[5] !== value) {
+    t3 = <div>{value}</div>;
+    $[5] = value;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propValue: "test", onChange: () => {} }],
+};
+
+```
+      
+### 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

@@ -0,0 +1,17 @@
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component({propValue, onChange}) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+    onChange();
+  }, [propValue]);
+
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{propValue: 'test', onChange: () => {}}],
+};

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

@@ -0,0 +1,70 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState} from 'react';
+
+function Component({propValue}) {
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(propValue);
+    globalCall();
+  }, [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
+import { useEffect, useState } from "react";
+
+function Component(t0) {
+  const $ = _c(5);
+  const { propValue } = t0;
+  const [value, setValue] = useState(null);
+  let t1;
+  let t2;
+  if ($[0] !== propValue) {
+    t1 = () => {
+      setValue(propValue);
+      globalCall();
+    };
+    t2 = [propValue];
+    $[0] = propValue;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== value) {
+    t3 = <div>{value}</div>;
+    $[3] = value;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ propValue: "test" }],
+};
+
+```
+      
+### Eval output
+(kind: exception) globalCall is not defined

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

@@ -1,47 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp
-import {useEffect, useState} from 'react';
-
-function Component({initialName}) {
-  const [name, setName] = useState('');
-
-  useEffect(() => {
-    setName(initialName);
-  }, [initialName]);
-
-  return (
-    <div>
-      <input value={name} onChange={e => setName(e.target.value)} />
-    </div>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{initialName: 'John'}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Values derived from props and 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.derived-state-from-prop-setter-call-outside-effect-no-error.ts:8:4
-   6 |
-   7 |   useEffect(() => {
->  8 |     setName(initialName);
-     |     ^^^^^^^ Values derived from props and 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 |   }, [initialName]);
-  10 |
-  11 |   return (
-```
-          
-      

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

@@ -1,46 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp
-import {useEffect, useState} from 'react';
-
-function MockComponent({onSet}) {
-  return <div onClick={() => onSet('clicked')}>Mock Component</div>;
-}
-
-function Component({propValue}) {
-  const [value, setValue] = useState(null);
-  useEffect(() => {
-    setValue(propValue);
-  }, [propValue]);
-
-  return <MockComponent onSet={setValue} />;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{propValue: 'test'}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Values derived from props and 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.derived-state-from-prop-setter-used-outside-effect-no-error.ts:11:4
-   9 |   const [value, setValue] = useState(null);
-  10 |   useEffect(() => {
-> 11 |     setValue(propValue);
-     |     ^^^^^^^^ Values derived from props and 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)
-  12 |   }, [propValue]);
-  13 |
-  14 |   return <MockComponent onSet={setValue} />;
-```
-          
-      

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

@@ -1,43 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp
-import {useEffect, useState} from 'react';
-
-function Component({propValue}) {
-  const [value, setValue] = useState(null);
-  useEffect(() => {
-    setValue(propValue);
-    globalCall();
-  }, [propValue]);
-
-  return <div>{value}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{propValue: 'test'}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Values derived from props and 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.effect-with-global-function-call-no-error.ts:7:4
-   5 |   const [value, setValue] = useState(null);
-   6 |   useEffect(() => {
->  7 |     setValue(propValue);
-     |     ^^^^^^^^ Values derived from props and 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)
-   8 |     globalCall();
-   9 |   }, [propValue]);
-  10 |
-```
-          
-      

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

@@ -0,0 +1,82 @@
+
+## Input
+
+```javascript
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState, useRef} from 'react';
+
+export default function Component({test}) {
+  const [local, setLocal] = useState(0);
+
+  const myRef = useRef(null);
+
+  useEffect(() => {
+    if (myRef.current) {
+      setLocal(test);
+    } else {
+      setLocal(test + test);
+    }
+  }, [test]);
+
+  return <>{local}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{test: 4}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
+import { useEffect, useState, useRef } from "react";
+
+export default function Component(t0) {
+  const $ = _c(5);
+  const { test } = t0;
+  const [local, setLocal] = useState(0);
+
+  const myRef = useRef(null);
+  let t1;
+  let t2;
+  if ($[0] !== test) {
+    t1 = () => {
+      if (myRef.current) {
+        setLocal(test);
+      } else {
+        setLocal(test + test);
+      }
+    };
+
+    t2 = [test];
+    $[0] = test;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== local) {
+    t3 = <>{local}</>;
+    $[3] = local;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ test: 4 }],
+};
+
+```
+      
+### 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

@@ -0,0 +1,23 @@
+// @validateNoDerivedComputationsInEffects_exp
+import {useEffect, useState, useRef} from 'react';
+
+export default function Component({test}) {
+  const [local, setLocal] = useState(0);
+
+  const myRef = useRef(null);
+
+  useEffect(() => {
+    if (myRef.current) {
+      setLocal(test);
+    } else {
+      setLocal(test + test);
+    }
+  }, [test]);
+
+  return <>{local}</>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{test: 4}],
+};