[compiler] Prevent local state source variables from depending on other state

Summary:
When a local state is created sometimes it uses a `prop` or even other local state for its initial value.

This value is only relevant on first render so we shouldn't consider it part of our data flow

Test Plan:
Added tests

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

@@ -2,23 +2,17 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 
-function Component({prop}) {
-  const [s, setS] = useState();
-  const [second, setSecond] = useState(prop);
+function Component({ prop }) {
+  const [s, setS] = useState(prop)
+  const [second, setSecond] = useState(prop)
 
-  /*
-   * `second` is a source of state. It will inherit the value of `prop` in
-   * the first render, but after that it will no longer be updated when
-   * `prop` changes. So we shouldn't consider `second` as being derived from
-   * `prop`
-   */
   useEffect(() => {
-    setS(second);
-  }, [second]);
+    setS(second)
+  }, [second])
 
-  return <div>{s}</div>;
+  return <div>{s}</div>
 }
 
 ```
@@ -26,12 +20,12 @@ function Component({prop}) {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 
 function Component(t0) {
   const $ = _c(5);
   const { prop } = t0;
-  const [s, setS] = useState();
+  const [s, setS] = useState(prop);
   const [second] = useState(prop);
   let t1;
   let t2;
@@ -60,13 +54,6 @@ function Component(t0) {
 }
 
 ```
-
-## Logs
-
-```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [second]\n\nData Flow Tree:\n└── second (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":14,"column":4,"index":443},"end":{"line":14,"column":8,"index":447},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts","identifierName":"setS"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":64},"end":{"line":18,"column":1,"index":500},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
       
 ### Eval output
 (kind: exception) Fixture not implemented

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

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp
 
 function Component({prop}) {
   const [s, setS] = useState();

packages/react-dom/src/__tests__/ReactDOMActivity-test.js

@@ -10,17 +10,11 @@
 'use strict';
 
 let React;
-let ReactDOM;
-let ReactDOMClient;
-let Scheduler;
-let act;
 let Activity;
 let useState;
-let useLayoutEffect;
-let useEffect;
-let LegacyHidden;
-let assertLog;
-let Suspense;
+let ReactDOM;
+let ReactDOMClient;
+let act;
 
 describe('ReactDOMActivity', () => {
   let container;
@@ -28,19 +22,11 @@ describe('ReactDOMActivity', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    Scheduler = require('scheduler/unstable_mock');
     Activity = React.Activity;
     useState = React.useState;
-    Suspense = React.Suspense;
-    useState = React.useState;
-    LegacyHidden = React.unstable_LegacyHidden;
-    useLayoutEffect = React.useLayoutEffect;
-    useEffect = React.useEffect;
     ReactDOM = require('react-dom');
     ReactDOMClient = require('react-dom/client');
-    const InternalTestUtils = require('internal-test-utils');
-    act = InternalTestUtils.act;
-    assertLog = InternalTestUtils.assertLog;
+    act = require('internal-test-utils').act;
     container = document.createElement('div');
     document.body.appendChild(container);
   });
@@ -49,11 +35,6 @@ describe('ReactDOMActivity', () => {
     document.body.removeChild(container);
   });
 
-  function Text(props) {
-    Scheduler.log(props.text);
-    return <span prop={props.text}>{props.children}</span>;
-  }
-
   // @gate enableActivity
   it(
     'hiding an Activity boundary also hides the direct children of any ' +
@@ -72,7 +53,7 @@ describe('ReactDOMActivity', () => {
         );
       }
 
-      function App() {
+      function App({portalContents}) {
         return (
           <Accordion>
             <div>
@@ -118,7 +99,7 @@ describe('ReactDOMActivity', () => {
         );
       }
 
-      function App() {
+      function App({portalContents}) {
         return (
           <Activity mode="hidden">
             <div>
@@ -150,416 +131,4 @@ describe('ReactDOMActivity', () => {
       );
     },
   );
-
-  // @gate enableActivity
-  it('hides new portals added to an already hidden tree', async () => {
-    function Child() {
-      return <Text text="Child" />;
-    }
-
-    const portalContainer = document.createElement('div');
-
-    function Portal({children}) {
-      return <div>{ReactDOM.createPortal(children, portalContainer)}</div>;
-    }
-
-    const root = ReactDOMClient.createRoot(container);
-    // Mount hidden tree.
-    await act(() => {
-      root.render(
-        <Activity mode="hidden">
-          <Text text="Parent" />
-        </Activity>,
-      );
-    });
-    assertLog(['Parent']);
-    expect(container.innerHTML).toBe(
-      '<span prop="Parent" style="display: none;"></span>',
-    );
-    expect(portalContainer.innerHTML).toBe('');
-
-    // Add a portal inside the hidden tree.
-    await act(() => {
-      root.render(
-        <Activity mode="hidden">
-          <Text text="Parent" />
-          <Portal>
-            <Child />
-          </Portal>
-        </Activity>,
-      );
-    });
-    assertLog(['Parent', 'Child']);
-    expect(container.innerHTML).toBe(
-      '<span prop="Parent" style="display: none;"></span><div style="display: none;"></div>',
-    );
-    expect(portalContainer.innerHTML).toBe(
-      '<span prop="Child" style="display: none;"></span>',
-    );
-
-    // Now reveal it.
-    await act(() => {
-      root.render(
-        <Activity mode="visible">
-          <Text text="Parent" />
-          <Portal>
-            <Child />
-          </Portal>
-        </Activity>,
-      );
-    });
-
-    assertLog(['Parent', 'Child']);
-    expect(container.innerHTML).toBe(
-      '<span prop="Parent" style=""></span><div style=""></div>',
-    );
-    expect(portalContainer.innerHTML).toBe(
-      '<span prop="Child" style=""></span>',
-    );
-  });
-
-  // @gate enableActivity
-  it('hides new insertions inside an already hidden portal', async () => {
-    function Child({text}) {
-      useLayoutEffect(() => {
-        Scheduler.log(`Mount layout ${text}`);
-        return () => {
-          Scheduler.log(`Unmount layout ${text}`);
-        };
-      }, [text]);
-      return <Text text={text} />;
-    }
-
-    const portalContainer = document.createElement('div');
-
-    function Portal({children}) {
-      return <div>{ReactDOM.createPortal(children, portalContainer)}</div>;
-    }
-
-    const root = ReactDOMClient.createRoot(container);
-    // Mount hidden tree.
-    await act(() => {
-      root.render(
-        <Activity mode="hidden">
-          <Portal>
-            <Child text="A" />
-          </Portal>
-        </Activity>,
-      );
-    });
-    assertLog(['A']);
-    expect(container.innerHTML).toBe('<div style="display: none;"></div>');
-    expect(portalContainer.innerHTML).toBe(
-      '<span prop="A" style="display: none;"></span>',
-    );
-
-    // Add a node inside the hidden portal.
-    await act(() => {
-      root.render(
-        <Activity mode="hidden">
-          <Portal>
-            <Child text="A" />
-            <Child text="B" />
-          </Portal>
-        </Activity>,
-      );
-    });
-    assertLog(['A', 'B']);
-    expect(container.innerHTML).toBe('<div style="display: none;"></div>');
-    expect(portalContainer.innerHTML).toBe(
-      '<span prop="A" style="display: none;"></span><span prop="B" style="display: none;"></span>',
-    );
-
-    // Now reveal it.
-    await act(() => {
-      root.render(
-        <Activity mode="visible">
-          <Portal>
-            <Child text="A" />
-            <Child text="B" />
-          </Portal>
-        </Activity>,
-      );
-    });
-
-    assertLog(['A', 'B', 'Mount layout A', 'Mount layout B']);
-    expect(container.innerHTML).toBe('<div style=""></div>');
-    expect(portalContainer.innerHTML).toBe(
-      '<span prop="A" style=""></span><span prop="B" style=""></span>',
-    );
-  });
-
-  // @gate enableActivity
-  it('reveal an inner Suspense boundary without revealing an outer Activity on the same host child', async () => {
-    const promise = new Promise(() => {});
-
-    function Child({showInner}) {
-      useLayoutEffect(() => {
-        Scheduler.log('Mount layout');
-        return () => {
-          Scheduler.log('Unmount layout');
-        };
-      }, []);
-      return (
-        <>
-          {showInner ? null : promise}
-          <Text text="Child" />
-        </>
-      );
-    }
-
-    const portalContainer = document.createElement('div');
-
-    function Portal({children}) {
-      return <div>{ReactDOM.createPortal(children, portalContainer)}</div>;
-    }
-
-    const root = ReactDOMClient.createRoot(container);
-
-    // Prerender the whole tree.
-    await act(() => {
-      root.render(
-        <Activity mode="hidden">
-          <Portal>
-            <Suspense name="Inner" fallback={<span>Loading</span>}>
-              <Child showInner={true} />
-            </Suspense>
-          </Portal>
-        </Activity>,
-      );
-    });
-
-    assertLog(['Child']);
-    expect(container.innerHTML).toBe('<div style="display: none;"></div>');
-    expect(portalContainer.innerHTML).toBe(
-      '<span prop="Child" style="display: none;"></span>',
-    );
-
-    // Re-suspend the inner.
-    await act(() => {
-      root.render(
-        <Activity mode="hidden">
-          <Portal>
-            <Suspense name="Inner" fallback={<span>Loading</span>}>
-              <Child showInner={false} />
-            </Suspense>
-          </Portal>
-        </Activity>,
-      );
-    });
-    assertLog([]);
-    expect(container.innerHTML).toBe('<div style="display: none;"></div>');
-    expect(portalContainer.innerHTML).toBe(
-      '<span prop="Child" style="display: none;"></span><span style="display: none;">Loading</span>',
-    );
-
-    // Toggle to visible while suspended.
-    await act(() => {
-      root.render(
-        <Activity mode="visible">
-          <Portal>
-            <Suspense name="Inner" fallback={<span>Loading</span>}>
-              <Child showInner={false} />
-            </Suspense>
-          </Portal>
-        </Activity>,
-      );
-    });
-    assertLog([]);
-    expect(container.innerHTML).toBe('<div style=""></div>');
-    expect(portalContainer.innerHTML).toBe(
-      '<span prop="Child" style="display: none;"></span><span style="">Loading</span>',
-    );
-
-    // Now reveal.
-    await act(() => {
-      root.render(
-        <Activity mode="visible">
-          <Portal>
-            <Suspense name="Inner" fallback={<span>Loading</span>}>
-              <Child showInner={true} />
-            </Suspense>
-          </Portal>
-        </Activity>,
-      );
-    });
-    assertLog(['Child', 'Mount layout']);
-    expect(container.innerHTML).toBe('<div style=""></div>');
-    expect(portalContainer.innerHTML).toBe(
-      '<span prop="Child" style=""></span>',
-    );
-  });
-
-  // @gate enableActivity
-  it('mounts/unmounts layout effects in portal when visibility changes (starting visible)', async () => {
-    function Child() {
-      useLayoutEffect(() => {
-        Scheduler.log('Mount layout');
-        return () => {
-          Scheduler.log('Unmount layout');
-        };
-      }, []);
-      return <Text text="Child" />;
-    }
-
-    const portalContainer = document.createElement('div');
-
-    function Portal({children}) {
-      return <div>{ReactDOM.createPortal(children, portalContainer)}</div>;
-    }
-
-    const root = ReactDOMClient.createRoot(container);
-    // Mount visible tree.
-    await act(() => {
-      root.render(
-        <Activity mode="visible">
-          <Portal>
-            <Child />
-          </Portal>
-        </Activity>,
-      );
-    });
-    assertLog(['Child', 'Mount layout']);
-    expect(container.innerHTML).toBe('<div></div>');
-    expect(portalContainer.innerHTML).toBe('<span prop="Child"></span>');
-
-    // Hide the tree. The layout effect is unmounted.
-    await act(() => {
-      root.render(
-        <Activity mode="hidden">
-          <Portal>
-            <Child />
-          </Portal>
-        </Activity>,
-      );
-    });
-    assertLog(['Unmount layout', 'Child']);
-    expect(container.innerHTML).toBe('<div style="display: none;"></div>');
-    expect(portalContainer.innerHTML).toBe(
-      '<span prop="Child" style="display: none;"></span>',
-    );
-  });
-
-  // @gate enableActivity
-  it('mounts/unmounts layout effects in portal when visibility changes (starting hidden)', async () => {
-    function Child() {
-      useLayoutEffect(() => {
-        Scheduler.log('Mount layout');
-        return () => {
-          Scheduler.log('Unmount layout');
-        };
-      }, []);
-      return <Text text="Child" />;
-    }
-
-    const portalContainer = document.createElement('div');
-
-    function Portal({children}) {
-      return <div>{ReactDOM.createPortal(children, portalContainer)}</div>;
-    }
-
-    const root = ReactDOMClient.createRoot(container);
-    // Mount hidden tree.
-    await act(() => {
-      root.render(
-        <Activity mode="hidden">
-          <Portal>
-            <Child />
-          </Portal>
-        </Activity>,
-      );
-    });
-    // No layout effect.
-    assertLog(['Child']);
-    expect(container.innerHTML).toBe('<div style="display: none;"></div>');
-    expect(portalContainer.innerHTML).toBe(
-      '<span prop="Child" style="display: none;"></span>',
-    );
-
-    // Unhide the tree. The layout effect is mounted.
-    await act(() => {
-      root.render(
-        <Activity mode="visible">
-          <Portal>
-            <Child />
-          </Portal>
-        </Activity>,
-      );
-    });
-    assertLog(['Child', 'Mount layout']);
-    expect(container.innerHTML).toBe('<div style=""></div>');
-    expect(portalContainer.innerHTML).toBe(
-      '<span prop="Child" style=""></span>',
-    );
-  });
-
-  // @gate enableLegacyHidden
-  it('does not toggle effects or hide nodes for LegacyHidden component inside portal', async () => {
-    function Child() {
-      useLayoutEffect(() => {
-        Scheduler.log('Mount layout');
-        return () => {
-          Scheduler.log('Unmount layout');
-        };
-      }, []);
-      useEffect(() => {
-        Scheduler.log('Mount passive');
-        return () => {
-          Scheduler.log('Unmount passive');
-        };
-      }, []);
-      return <Text text="Child" />;
-    }
-
-    const portalContainer = document.createElement('div');
-
-    function Portal({children}) {
-      return <div>{ReactDOM.createPortal(children, portalContainer)}</div>;
-    }
-
-    const root = ReactDOMClient.createRoot(container);
-    // Mount visible tree.
-    await act(() => {
-      root.render(
-        <LegacyHidden mode="visible">
-          <Portal>
-            <Child />
-          </Portal>
-        </LegacyHidden>,
-      );
-    });
-    assertLog(['Child', 'Mount layout', 'Mount passive']);
-    expect(container.innerHTML).toBe('<div></div>');
-    expect(portalContainer.innerHTML).toBe('<span prop="Child"></span>');
-
-    // Hide the tree.
-    await act(() => {
-      root.render(
-        <LegacyHidden mode="hidden">
-          <Portal>
-            <Child />
-          </Portal>
-        </LegacyHidden>,
-      );
-    });
-    // Effects not unmounted.
-    assertLog(['Child']);
-    expect(container.innerHTML).toBe('<div></div>');
-    expect(portalContainer.innerHTML).toBe('<span prop="Child"></span>');
-
-    // Unhide the tree.
-    await act(() => {
-      root.render(
-        <LegacyHidden mode="visible">
-          <Portal>
-            <Child />
-          </Portal>
-        </LegacyHidden>,
-      );
-    });
-    // Effects already mounted.
-    assertLog(['Child']);
-    expect(container.innerHTML).toBe('<div></div>');
-    expect(portalContainer.innerHTML).toBe('<span prop="Child"></span>');
-  });
 });