From cb82bf8e198a5e3ebd30d4512544a771745fb825 Mon Sep 17 00:00:00 2001 From: Basit Qayoom Date: Mon, 9 Feb 2026 23:44:37 +0530 Subject: [PATCH] [Compiler] Fix false positive for setState after await in useEffect (#34905) The `set-state-in-effect` validation was incorrectly flagging setState calls that appear after an `await` expression inside async functions called from useEffect. After an `await`, execution continues asynchronously in a microtask, so the setState call is not synchronous within the effect body. This fix adds `Await` instruction tracking in `getSetStateCall()`. When an `Await` instruction is encountered in a block, subsequent setState calls in the same block are skipped since they execute asynchronously. Test plan: - allow-setState-in-useEffect-after-await: setState after await via useCallback + useEffect (exact issue repro) - no error - allow-setState-in-useEffect-async-callback: setState after await in nested async function inside useEffect - no error - invalid-setState-in-useEffect-before-await: setState before await is still correctly flagged - error reported Fixes #34905 Co-authored-by: Cursor --- .../Validation/ValidateNoSetStateInEffects.ts | 19 +++++++ ...etState-in-useEffect-after-await.expect.md | 53 ++++++++++++++++++ ...allow-setState-in-useEffect-after-await.js | 16 ++++++ ...tate-in-useEffect-async-callback.expect.md | 49 +++++++++++++++++ ...ow-setState-in-useEffect-async-callback.js | 14 +++++ ...tState-in-useEffect-before-await.expect.md | 54 +++++++++++++++++++ ...alid-setState-in-useEffect-before-await.js | 16 ++++++ 7 files changed, 221 insertions(+) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-after-await.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-after-await.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-async-callback.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-async-callback.js create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-before-await.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-before-await.js diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts index 2457e0d7b99e..e2db363f9c8d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts +++ b/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 ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-after-await.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-after-await.expect.md new file mode 100644 index 000000000000..4bfc674e4b7d --- /dev/null +++ b/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 \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-after-await.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-after-await.js new file mode 100644 index 000000000000..986a91f6efb5 --- /dev/null +++ b/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; +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-async-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-async-callback.expect.md new file mode 100644 index 000000000000..2e2bacab79a4 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-async-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-setState-in-useEffect-async-callback.js new file mode 100644 index 000000000000..cd6da006f5eb --- /dev/null +++ b/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; +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-before-await.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-before-await.expect.md new file mode 100644 index 000000000000..bcf02ba9f599 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-before-await.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-before-await.js new file mode 100644 index 000000000000..bc9e7f19e631 --- /dev/null +++ b/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; +}