[compiler] Fix false positive for local mutation in filter callbacks

Author: soloclz

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

@@ -161,6 +161,14 @@ function getContextReassignment(
           }
           break;
         }
+        case 'PropertyLoad': {
+          /*
+           * Property loads should not inherit reassignment from their receiver.
+           * A value like `someItems.length` is not itself a reassigning function,
+           * even if `someItems` originated from a callback that mutates context.
+           */
+          break;
+        }
         default: {
           let operands = eachInstructionValueOperand(value);
           // If we're calling a function that doesn't let its arguments escape, only test the callee

packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRuleTypescript-test.ts

@@ -36,6 +36,69 @@ const tests: CompilerTestCases = {
         }
       `,
     },
+    {
+      name: 'Local mutation within filter callback is allowed during render',
+      filename: 'test.tsx',
+      code: normalizeIndent`
+        import React from 'react';
+        function Component({items}) {
+          const stuff = React.useMemo(() => {
+            let isCool = false;
+            const someItems = items.filter(cause => {
+              if (cause.foo) {
+                isCool = true;
+              }
+              return true;
+            });
+            if (someItems.length > 0) {
+              return {someItems, isCool};
+            }
+          }, [items]);
+          return <div>{stuff?.isCool ? 'cool' : 'not cool'}</div>;
+        }
+      `,
+    },
+    {
+      name: 'Local mutation within map callback is allowed during render',
+      filename: 'test.tsx',
+      code: normalizeIndent`
+        import React from 'react';
+        function Component({items}) {
+          const stuff = React.useMemo(() => {
+            let isCool = false;
+            const mappedItems = items.map(cause => {
+              if (cause.foo) {
+                isCool = true;
+              }
+              return cause;
+            });
+            if (mappedItems.length > 0) {
+              return {mappedItems, isCool};
+            }
+          }, [items]);
+          return <div>{stuff?.isCool ? 'cool' : 'not cool'}</div>;
+        }
+      `,
+    },
+    {
+      name: 'Local mutation within forEach callback is allowed during render',
+      filename: 'test.tsx',
+      code: normalizeIndent`
+        import React from 'react';
+        function Component({items}) {
+          const stuff = React.useMemo(() => {
+            let isCool = false;
+            items.forEach(cause => {
+              if (cause.foo) {
+                isCool = true;
+              }
+            });
+            return {isCool};
+          }, [items]);
+          return <div>{stuff.isCool ? 'cool' : 'not cool'}</div>;
+        }
+      `,
+    },
     {
       name: 'Repro for hooks as normal values',
       filename: 'test.tsx',