Preserve module global snapshots before reassignment

compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts

@@ -231,6 +231,14 @@ function evaluateInstruction(
       return value;
     }
     case 'LoadGlobal': {
+      /*
+       * Module-local bindings may be reassigned by code outside the current
+       * function's reactive graph. A load from one of those bindings is a
+       * snapshot, not a constant reference that can replace later local reads.
+       */
+      if (value.binding.kind === 'ModuleLocal') {
+        return null;
+      }
       return value;
     }
     case 'ComputedLoad': {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-copy-before-assignment-in-effect.expect.md

@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+import {useEffect} from 'react';
+
+let i = 0;
+const log = [];
+
+function Component() {
+  useEffect(() => {
+    const runNumber = i;
+    log.push(`effect ${runNumber}`);
+    i += 1;
+    return () => {
+      log.push(`cleanup ${runNumber}`);
+    };
+  }, []);
+  return <div>OK</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useEffect } from "react";
+
+let i = 0;
+const log = [];
+
+function Component() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = [];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(_temp, t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div>OK</div>;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+function _temp() {
+  const runNumber = i;
+  log.push(`effect ${runNumber}`);
+  i = i + 1;
+  return () => {
+    log.push(`cleanup ${runNumber}`);
+  };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+### Eval output
+(kind: ok) <div>OK</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/global-copy-before-assignment-in-effect.js

@@ -0,0 +1,21 @@
+import {useEffect} from 'react';
+
+let i = 0;
+const log = [];
+
+function Component() {
+  useEffect(() => {
+    const runNumber = i;
+    log.push(`effect ${runNumber}`);
+    i += 1;
+    return () => {
+      log.push(`cleanup ${runNumber}`);
+    };
+  }, []);
+  return <div>OK</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};