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; +}