[compiler] Fix false negatives and add data flow tree to compiler error for no-deriving-state-in-effects

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

@@ -34,7 +34,16 @@ Found 1 error:
 
 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.
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [value]
+
+Data Flow Tree:
+└── value (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
 
 error.derived-state-conditionally-in-effect.ts:9:6
    7 |   useEffect(() => {

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

@@ -31,7 +31,16 @@ Found 1 error:
 
 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.
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [input]
+
+Data Flow Tree:
+└── input (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
 
 error.derived-state-from-default-props.ts:9:4
    7 |

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

@@ -28,7 +28,16 @@ Found 1 error:
 
 Error: You might not need an effect. Derive values in render, not effects.
 
-Derived values (From local state: [count]) 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.
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+State: [count]
+
+Data Flow Tree:
+└── count (State)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
 
 error.derived-state-from-local-state-in-effect.ts:10:6
    8 |   useEffect(() => {

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

@@ -38,7 +38,18 @@ Found 1 error:
 
 Error: You might not need an effect. Derive values in render, not effects.
 
-Derived values (From props and local state: [firstName, lastName]) 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.
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [firstName]
+State: [lastName]
+
+Data Flow Tree:
+├── firstName (Prop)
+└── lastName (State)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
 
 error.derived-state-from-prop-local-state-and-component-scope.ts:11:4
    9 |

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

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

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

@@ -0,0 +1,11 @@
+// @validateNoDerivedComputationsInEffects_exp
+
+function Component({value}) {
+  const [checked, setChecked] = useState('');
+
+  useEffect(() => {
+    setChecked(value === '' ? [] : value.split(','));
+  }, [value]);
+
+  return <div>{checked}</div>;
+}

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

@@ -31,7 +31,16 @@ Found 1 error:
 
 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.
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [value]
+
+Data Flow Tree:
+└── value (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
 
 error.derived-state-from-prop-with-side-effect.ts:8:4
    6 |

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

@@ -35,7 +35,16 @@ Found 1 error:
 
 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.
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [propValue]
+
+Data Flow Tree:
+└── propValue (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
 
 error.effect-contains-local-function-call.ts:12:4
   10 |

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

@@ -33,7 +33,16 @@ Found 1 error:
 
 Error: You might not need an effect. Derive values in render, not effects.
 
-Derived values (From 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.
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+State: [firstName]
+
+Data Flow Tree:
+└── firstName (State)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
 
 error.invalid-derived-computation-in-effect.ts:11:4
    9 |   const [fullName, setFullName] = useState('');

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

@@ -31,7 +31,17 @@ Found 1 error:
 
 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.
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [props]
+
+Data Flow Tree:
+└── computed
+    └── props (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
 
 error.invalid-derived-state-from-computed-props.ts:9:4
    7 |   useEffect(() => {

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

@@ -32,7 +32,16 @@ Found 1 error:
 
 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.
+Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
+
+This setState call is setting a derived value that depends on the following reactive sources:
+
+Props: [props]
+
+Data Flow Tree:
+└── props (Prop)
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state.
 
 error.invalid-derived-state-from-destructured-props.ts:10:4
    8 |