[compiler] Fix false negative: independently memoize values used as method call receivers

compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts

@@ -46,6 +46,7 @@ import {
   makeScopeId,
 } from './HIR';
 import {
+  BuiltInArrayId,
   BuiltInMixedReadonlyId,
   DefaultMutatingHook,
   DefaultNonmutatingHook,
@@ -1000,6 +1001,24 @@ export class Environment {
       }
     } else if (typeof property === 'string' && isHookName(property)) {
       return this.#getCustomHookType();
+    } else if (receiver.kind === 'Type' && typeof property === 'string') {
+      /*
+       * For unknown receiver types, try to resolve from the BuiltInArray shape
+       * but only for methods also present in MixedReadonly (the safe subset).
+       * If .map() is called on an unknown type, the value must be array-like.
+       * We use the Array shape (not MixedReadonly) because it has aliasing
+       * signatures that correctly model data flow without over-extending
+       * mutable ranges. See ObjectShape.ts BuiltInMixedReadonlyId for details.
+       */
+      const mixedShape = this.#shapes.get(BuiltInMixedReadonlyId);
+      const arrayShape = this.#shapes.get(BuiltInArrayId);
+      if (
+        mixedShape !== undefined &&
+        arrayShape !== undefined &&
+        mixedShape.properties.has(property)
+      ) {
+        return arrayShape.properties.get(property) ?? null;
+      }
     }
     return null;
   }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-independent-memoization-for-unknown-receiver-method-call.expect.md

@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+function ExpensiveComponent({data, onClick}) {
+  const processedData = expensiveProcessing(data);
+  return (
+    <ul>
+      {processedData.map((item) => (
+        <li key={item.id} onClick={() => onClick(item)}>
+          {item.name}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function ExpensiveComponent(t0) {
+  const $ = _c(5);
+  const {
+    data,
+    onClick
+  } = t0;
+  let t1;
+  if ($[0] !== data) {
+    t1 = expensiveProcessing(data);
+    $[0] = data;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const processedData = t1;
+  let t2;
+  if ($[2] !== onClick || $[3] !== processedData) {
+    t2 = <ul>{processedData.map(item => <li key={item.id} onClick={() => onClick(item)}>{item.name}</li>)}</ul>;
+    $[2] = onClick;
+    $[3] = processedData;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+
+```
+

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-independent-memoization-for-unknown-receiver-method-call.js

@@ -0,0 +1,12 @@
+function ExpensiveComponent({data, onClick}) {
+  const processedData = expensiveProcessing(data);
+  return (
+    <ul>
+      {processedData.map((item) => (
+        <li key={item.id} onClick={() => onClick(item)}>
+          {item.name}
+        </li>
+      ))}
+    </ul>
+  );
+}