[compiler] Improve error for calculate in render useEffect validation

Summary:
Change error and update snapshots

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerError, Effect} from '..';
+import {CompilerDiagnostic, CompilerError, Effect} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {
   BlockId,
@@ -19,8 +19,9 @@ import {
   Instruction,
   isUseStateType,
   isUseRefType,
+  GeneratedSource,
+  SourceLocation,
 } from '../HIR';
-import {printInstruction} from '../HIR/PrintHIR';
 import {eachInstructionLValue, eachInstructionOperand} from '../HIR/visitors';
 import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables';
 import {assertExhaustive} from '../Utils/utils';
@@ -60,6 +61,10 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
   const functions: Map<IdentifierId, FunctionExpression> = new Map();
 
   const derivationCache: Map<IdentifierId, DerivationMetadata> = new Map();
+  const setStateCache: Map<string | undefined | null, Array<Place>> = new Map();
+
+  const effects: Array<HIRFunction> = [];
+
   if (fn.fnType === 'Hook') {
     for (const param of fn.params) {
       if (param.kind === 'Identifier') {
@@ -128,11 +133,7 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
           ) {
             const effectFunction = functions.get(value.args[0].identifier.id);
             if (effectFunction != null) {
-              validateEffect(
-                effectFunction.loweredFunc.func,
-                errors,
-                derivationCache,
-              );
+              effects.push(effectFunction.loweredFunc.func);
             }
           } else if (isUseStateType(lvalue.identifier)) {
             const stateValueSource = value.args[0];
@@ -144,6 +145,25 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
         }
 
         for (const operand of eachInstructionOperand(instr)) {
+          // Record setState usages everywhere
+          switch (instr.value.kind) {
+            case 'JsxExpression':
+            case 'CallExpression':
+            case 'MethodCall':
+              if (
+                isSetStateType(operand.identifier) &&
+                operand.loc !== GeneratedSource
+              ) {
+                if (setStateCache.has(operand.loc.identifierName)) {
+                  setStateCache.get(operand.loc.identifierName)!.push(operand);
+                } else {
+                  setStateCache.set(operand.loc.identifierName, [operand]);
+                }
+              }
+              break;
+            default:
+          }
+
           const operandMetadata = derivationCache.get(operand.identifier.id);
 
           if (operandMetadata === undefined) {
@@ -212,6 +232,10 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
     }
   }
 
+  for (const effect of effects) {
+    validateEffect(effect, errors, derivationCache, setStateCache);
+  }
+
   if (errors.hasAnyErrors()) {
     throw errors;
   }
@@ -269,12 +293,19 @@ function validateEffect(
   effectFunction: HIRFunction,
   errors: CompilerError,
   derivationCache: Map<IdentifierId, DerivationMetadata>,
+  setStateCache: Map<string | undefined | null, Array<Place>>,
 ): void {
+  const effectSetStateCache: Map<
+    string | undefined | null,
+    Array<Place>
+  > = new Map();
   const seenBlocks: Set<BlockId> = new Set();
 
   const effectDerivedSetStateCalls: Array<{
     value: CallExpression;
+    loc: SourceLocation;
     sourceIds: Set<IdentifierId>;
+    typeOfValue: TypeOfValue;
   }> = [];
 
   const globals: Set<IdentifierId> = new Set();
@@ -292,6 +323,28 @@ function validateEffect(
         return;
       }
 
+      for (const operand of eachInstructionOperand(instr)) {
+        switch (instr.value.kind) {
+          case 'JsxExpression':
+          case 'CallExpression':
+          case 'MethodCall':
+            if (
+              isSetStateType(operand.identifier) &&
+              operand.loc !== GeneratedSource
+            ) {
+              if (effectSetStateCache.has(operand.loc.identifierName)) {
+                effectSetStateCache
+                  .get(operand.loc.identifierName)!
+                  .push(operand);
+              } else {
+                effectSetStateCache.set(operand.loc.identifierName, [operand]);
+              }
+            }
+            break;
+          default:
+        }
+      }
+
       if (
         instr.value.kind === 'CallExpression' &&
         isSetStateType(instr.value.callee.identifier) &&
@@ -305,7 +358,9 @@ function validateEffect(
         if (argMetadata !== undefined) {
           effectDerivedSetStateCalls.push({
             value: instr.value,
+            loc: instr.value.callee.loc,
             sourceIds: argMetadata.sourcesIds,
+            typeOfValue: argMetadata.typeOfValue,
           });
         }
       } else if (instr.value.kind === 'CallExpression') {
@@ -337,13 +392,44 @@ function validateEffect(
   }
 
   for (const derivedSetStateCall of effectDerivedSetStateCalls) {
-    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 &&
+      effectSetStateCache.has(derivedSetStateCall.loc.identifierName) &&
+      setStateCache.has(derivedSetStateCall.loc.identifierName) &&
+      effectSetStateCache.get(derivedSetStateCall.loc.identifierName)!
+        .length ===
+        setStateCache.get(derivedSetStateCall.loc.identifierName)!.length
+    ) {
+      const derivedDepsStr = Array.from(derivedSetStateCall.sourceIds)
+        .map(sourceId => {
+          const sourceMetadata = derivationCache.get(sourceId);
+          return sourceMetadata?.place.identifier.name?.value;
+        })
+        .filter(Boolean)
+        .join(', ');
+
+      let description;
+
+      if (derivedSetStateCall.typeOfValue === 'fromProps') {
+        description = `From props: [${derivedDepsStr}]`;
+      } else if (derivedSetStateCall.typeOfValue === 'fromState') {
+        description = `From local state: [${derivedDepsStr}]`;
+      } else {
+        description = `From props and local state: [${derivedDepsStr}]`;
+      }
+
+      errors.pushDiagnostic(
+        CompilerDiagnostic.create({
+          description: `Derived values (${description}) 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: ErrorCategory.EffectDerivationsOfState,
+          reason:
+            'You might not need an effect. Derive values in render, not effects.',
+        }).withDetails({
+          kind: 'error',
+          loc: derivedSetStateCall.value.callee.loc,
+          message: 'This should be computed during render, not in an effect',
+        }),
+      );
+    }
   }
 }

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
+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
+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
+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
+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/error.derived-state-conditionally-in-effect.expect.md

@@ -32,13 +32,15 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 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: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props: [value]) 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-conditionally-in-effect.ts:9:6
    7 |   useEffect(() => {
    8 |     if (enabled) {
 >  9 |       setLocalValue(value);
-     |       ^^^^^^^^^^^^^ 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)
+     |       ^^^^^^^^^^^^^ 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-from-default-props.expect.md

@@ -29,13 +29,15 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 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: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props: [input]) 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-from-default-props.ts:9:4
    7 |
    8 |   useEffect(() => {
 >  9 |     setCurrInput(input + localConst);
-     |     ^^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^^ 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-prop-local-state-and-component-scope.expect.md

@@ -36,13 +36,15 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 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: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props and local state: [firstName]) 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-from-prop-local-state-and-component-scope.ts:11:4
    9 |
   10 |   useEffect(() => {
 > 11 |     setFullName(firstName + ' ' + middleName + ' ' + lastName);
-     |     ^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^ 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-setter-call-outside-effect-no-error.expect.md

@@ -1,47 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects
-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
-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.derived-state-from-prop-with-side-effect.expect.md

@@ -29,13 +29,15 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 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: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props: [value]) 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-from-prop-with-side-effect.ts:8:4
    6 |
    7 |   useEffect(() => {
 >  8 |     setLocalValue(value);
-     |     ^^^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^^^ 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.effect-contains-local-function-call.expect.md

@@ -33,13 +33,15 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 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: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props: [propValue]) 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.effect-contains-local-function-call.ts:12:4
   10 |
   11 |   useEffect(() => {
 > 12 |     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)
+     |     ^^^^^^^^ 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.invalid-derived-computation-in-effect.expect.md

@@ -31,13 +31,15 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 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: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From local state: []) 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:11:4
    9 |   const [fullName, setFullName] = useState('');
   10 |   useEffect(() => {
 > 11 |     setFullName(firstName + ' ' + lastName);
-     |     ^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^ 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-state-from-computed-props.expect.md

@@ -29,13 +29,15 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 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: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props: [props]) 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-computed-props.ts:9:4
    7 |   useEffect(() => {
    8 |     const computed = props.prefix + props.value + props.suffix;
 >  9 |     setDisplayValue(computed);
-     |     ^^^^^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^^^^^ 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-destructured-props.expect.md

@@ -30,13 +30,15 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 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: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From props: [props]) 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-destructured-props.ts:10:4
    8 |
    9 |   useEffect(() => {
 > 10 |     setFullName(props.firstName + ' ' + props.lastName);
-     |     ^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^ 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/error.invalid-derived-computation-in-effect.expect.md

@@ -26,13 +26,15 @@ function BadExample() {
 ```
 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: You might not need an effect. Derive values in render, not effects.
+
+Derived values (From local state: []) 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:11:4
    9 |   const [fullName, setFullName] = useState('');
   10 |   useEffect(() => {
 > 11 |     setFullName(firstName + ' ' + lastName);
-     |     ^^^^^^^^^^^ 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)
+     |     ^^^^^^^^^^^ This should be computed during render, not in an effect
   12 |   }, [firstName, lastName]);
   13 |
   14 |   return <div>{fullName}</div>;