[compiler] Repro for missing memoization due to inferred mutation

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

@@ -23,7 +23,7 @@ import {
   ScopeId,
   SourceLocation,
 } from '../HIR';
-import {printManualMemoDependency} from '../HIR/PrintHIR';
+import {printIdentifier, printManualMemoDependency} from '../HIR/PrintHIR';
 import {eachInstructionValueOperand} from '../HIR/visitors';
 import {collectMaybeMemoDependencies} from '../Inference/DropManualMemoization';
 import {
@@ -537,7 +537,9 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {
               state.errors.push({
                 reason:
                   'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output.',
-                description: null,
+                description: DEBUG
+                  ? `${printIdentifier(identifier)} was not memoized`
+                  : null,
                 severity: ErrorSeverity.CannotPreserveMemoization,
                 loc,
                 suggestions: null,

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.expect.md

@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+// @flow @validatePreserveExistingMemoizationGuarantees
+import {useFragment} from 'react-relay';
+import LogEvent from 'LogEvent';
+import {useCallback, useMemo} from 'react';
+
+component Component(id) {
+  const {data} = useFragment();
+  const items = data.items.edges;
+
+  const [prevId, setPrevId] = useState(id);
+  const [index, setIndex] = useState(0);
+
+  const logData = useMemo(() => {
+    const item = items[index];
+    return {
+      key: item.key ?? '',
+    };
+  }, [index, items]);
+
+  const setCurrentIndex = useCallback(
+    (index: number) => {
+      const object = {
+        tracking: logData.key,
+      };
+      // We infer that this may mutate `object`, which in turn aliases
+      // data from `logData`, such that `logData` may be mutated.
+      LogEvent.log(() => object);
+      setIndex(index);
+    },
+    [index, logData, items]
+  );
+
+  if (prevId !== id) {
+    setPrevId(id);
+    setCurrentIndex(0);
+  }
+
+  return (
+    <Foo
+      index={index}
+      items={items}
+      current={mediaList[index]}
+      setCurrentIndex={setCurrentIndex}
+    />
+  );
+}
+
+```
+
+
+## Error
+
+```
+  19 |
+  20 |   const setCurrentIndex = useCallback(
+> 21 |     (index: number) => {
+     |     ^^^^^^^^^^^^^^^^^^^^
+> 22 |       const object = {
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 23 |         tracking: logData.key,
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 24 |       };
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 25 |       // We infer that this may mutate `object`, which in turn aliases
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 26 |       // data from `logData`, such that `logData` may be mutated.
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 27 |       LogEvent.log(() => object);
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 28 |       setIndex(index);
+     | ^^^^^^^^^^^^^^^^^^^^^^
+> 29 |     },
+     | ^^^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output. (21:29)
+  30 |     [index, logData, items]
+  31 |   );
+  32 |
+```
+
+

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-missed-memoization-from-inferred-mutation-in-logger.js

@@ -0,0 +1,46 @@
+// @flow @validatePreserveExistingMemoizationGuarantees
+import {useFragment} from 'react-relay';
+import LogEvent from 'LogEvent';
+import {useCallback, useMemo} from 'react';
+
+component Component(id) {
+  const {data} = useFragment();
+  const items = data.items.edges;
+
+  const [prevId, setPrevId] = useState(id);
+  const [index, setIndex] = useState(0);
+
+  const logData = useMemo(() => {
+    const item = items[index];
+    return {
+      key: item.key ?? '',
+    };
+  }, [index, items]);
+
+  const setCurrentIndex = useCallback(
+    (index: number) => {
+      const object = {
+        tracking: logData.key,
+      };
+      // We infer that this may mutate `object`, which in turn aliases
+      // data from `logData`, such that `logData` may be mutated.
+      LogEvent.log(() => object);
+      setIndex(index);
+    },
+    [index, logData, items]
+  );
+
+  if (prevId !== id) {
+    setPrevId(id);
+    setCurrentIndex(0);
+  }
+
+  return (
+    <Foo
+      index={index}
+      items={items}
+      current={mediaList[index]}
+      setCurrentIndex={setCurrentIndex}
+    />
+  );
+}