From 4bdc04f35ac737df105e3b5141bb25033e3c2e73 Mon Sep 17 00:00:00 2001 From: AntonChesnokov Date: Sat, 27 Dec 2025 14:02:17 +0400 Subject: [PATCH] [compiler] Fix setState-in-effect for React.useEffect namespace calls (#35377) ValidateNoSetStateInEffects treats MethodCall.property as the hook callee (so React.useEffect is detected).\n\nAdds a regression fixture for import * as React with React.useState/React.useEffect. --- .../Validation/ValidateNoSetStateInEffects.ts | 2 +- ...-setState-in-useEffect-namespace.expect.md | 42 +++++++++++++++++++ ...invalid-setState-in-useEffect-namespace.js | 10 +++++ 3 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-namespace.expect.md create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-namespace.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 91de8f20671..fa3b547bb87 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts @@ -97,7 +97,7 @@ export function validateNoSetStateInEffects( case 'CallExpression': { const callee = instr.value.kind === 'MethodCall' - ? instr.value.receiver + ? instr.value.property : instr.value.callee; if (isUseEffectEventType(callee.identifier)) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-namespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-namespace.expect.md new file mode 100644 index 00000000000..b7f823e46d4 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-namespace.expect.md @@ -0,0 +1,42 @@ + +## Input + +```javascript +// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint" +import * as React from 'react'; + +function Component() { + const [state, setState] = React.useState(0); + React.useEffect(() => { + setState(s => s + 1); + }); + return state; +} + +``` + +## Code + +```javascript +// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint" +import * as React from "react"; + +function Component() { + const [state, setState] = React.useState(0); + React.useEffect(() => { + setState((s) => s + 1); + }); + 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":7,"column":4,"index":200},"end":{"line":7,"column":12,"index":208},"filename":"invalid-setState-in-useEffect-namespace.ts","identifierName":"setState"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":100},"end":{"line":10,"column":1,"index":245},"filename":"invalid-setState-in-useEffect-namespace.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":1,"prunedMemoValues":1} +``` + +### 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-namespace.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-namespace.js new file mode 100644 index 00000000000..0748c1206f5 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-namespace.js @@ -0,0 +1,10 @@ +// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint" +import * as React from 'react'; + +function Component() { + const [state, setState] = React.useState(0); + React.useEffect(() => { + setState(s => s + 1); + }); + return state; +}