[Compiler] Fix false positive for setState after await in useEffect

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

@@ -232,7 +232,17 @@ function getSetStateCall(
         }
       }
     }
+    /**
+     * Track whether we've encountered an Await instruction in the current block.
+     * Code after an `await` executes asynchronously (in a microtask), so setState
+     * calls after an await are not synchronous and should not be flagged.
+     */
+    let seenAwait = false;
     for (const instr of block.instructions) {
+      if (instr.value.kind === 'Await') {
+        seenAwait = true;
+      }
+
       if (enableAllowSetStateFromRefsInEffects) {
         const hasRefOperand = Iterable_some(
           eachInstructionValueOperand(instr.value),
@@ -316,6 +326,15 @@ function getSetStateCall(
             isSetStateType(callee.identifier) ||
             setStateFunctions.has(callee.identifier.id)
           ) {
+            /**
+             * Skip setState calls that appear after an Await instruction in the
+             * same block. After an `await`, execution continues asynchronously
+             * (in a microtask), so the setState call is not synchronous within
+             * the effect body and should not trigger this validation.
+             */
+            if (seenAwait) {
+              continue;
+            }
             if (enableAllowSetStateFromRefsInEffects) {
               const arg = instr.value.args.at(0);
               if (

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-after-await.expect.md

@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useCallback, useEffect, useState} from 'react';
+
+function Component() {
+  const [ready, setReady] = useState(false);
+  const f = useCallback(async () => {
+    await fetch('...');
+    setReady(true);
+  }, []);
+
+  useEffect(() => {
+    f();
+  }, [f]);
+
+  return ready;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import { useCallback, useEffect, useState } from "react";
+
+function Component() {
+  const [ready, setReady] = useState(false);
+  const f = useCallback(async () => {
+    await fetch("...");
+    setReady(true);
+  }, []);
+
+  useEffect(() => {
+    f();
+  }, [f]);
+
+  return ready;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":124},"end":{"line":16,"column":1,"index":343},"filename":"allow-setState-in-useEffect-after-await.ts"},"fnName":"Component","memoSlots":3,"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/allow-setState-in-useEffect-after-await.js

@@ -0,0 +1,16 @@
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useCallback, useEffect, useState} from 'react';
+
+function Component() {
+  const [ready, setReady] = useState(false);
+  const f = useCallback(async () => {
+    await fetch('...');
+    setReady(true);
+  }, []);
+
+  useEffect(() => {
+    f();
+  }, [f]);
+
+  return ready;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-async-callback.expect.md

@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    async function run() {
+      await fetch('...');
+      setState(s => s + 1);
+    }
+    run();
+  });
+  return state;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    async function run() {
+      await fetch("...");
+      setState((s) => s + 1);
+    }
+    run();
+  });
+  return state;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":14,"column":1,"index":316},"filename":"allow-setState-in-useEffect-async-callback.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-async-callback.js

@@ -0,0 +1,14 @@
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    async function run() {
+      await fetch('...');
+      setState(s => s + 1);
+    }
+    run();
+  });
+  return state;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-before-await.expect.md

@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useCallback, useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const f = useCallback(async () => {
+    setState(s => s + 1);
+    await fetch('...');
+  }, []);
+
+  useEffect(() => {
+    f();
+  }, [f]);
+
+  return state;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import { useCallback, useEffect, useState } from "react";
+
+function Component() {
+  const [state, setState] = useState(0);
+  const f = useCallback(async () => {
+    setState((s) => s + 1);
+    await fetch("...");
+  }, []);
+
+  useEffect(() => {
+    f();
+  }, [f]);
+
+  return state;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"EffectSetState","reason":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":12,"column":4,"index":311},"end":{"line":12,"column":5,"index":312},"filename":"invalid-setState-in-useEffect-before-await.ts","identifierName":"f"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":124},"end":{"line":16,"column":1,"index":345},"filename":"invalid-setState-in-useEffect-before-await.ts"},"fnName":"Component","memoSlots":3,"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/invalid-setState-in-useEffect-before-await.js

@@ -0,0 +1,16 @@
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useCallback, useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const f = useCallback(async () => {
+    setState(s => s + 1);
+    await fetch('...');
+  }, []);
+
+  useEffect(() => {
+    f();
+  }, [f]);
+
+  return state;
+}