From 87f9cb5d55430f586d1368a7ae5b4208a9978d95 Mon Sep 17 00:00:00 2001 From: jynxio Date: Thu, 4 Dec 2025 00:46:28 +0800 Subject: [PATCH 1/2] [Compiler] Add React.useEffect case to invalid-setState-in-useEffect fixture This fixture demonstrates that `@validateNoSetStateInEffects` currently only detects setState calls in `useEffect()` but misses `React.useEffect()`. --- .../invalid-setState-in-useEffect.expect.md | 26 +++++++++++++++---- .../compiler/invalid-setState-in-useEffect.js | 5 +++- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.expect.md index 3c3a5a8053a..e062cb6ba50 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.expect.md @@ -3,13 +3,16 @@ ```javascript // @loggerTestOnly @validateNoSetStateInEffects -import {useEffect, useState} from 'react'; +import React, {useEffect, useState} from 'react'; function Component() { const [state, setState] = useState(0); useEffect(() => { setState(s => s + 1); }); + React.useEffect(() => { + setState(s => s + 1); + }); return state; } @@ -19,10 +22,10 @@ function Component() { ```javascript import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly @validateNoSetStateInEffects -import { useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; function Component() { - const $ = _c(1); + const $ = _c(2); const [state, setState] = useState(0); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { @@ -34,8 +37,21 @@ function Component() { t0 = $[0]; } useEffect(t0); + let t1; + if ($[1] === Symbol.for("react.memo_cache_sentinel")) { + t1 = () => { + setState(_temp2); + }; + $[1] = t1; + } else { + t1 = $[1]; + } + React.useEffect(t1); return state; } +function _temp2(s_0) { + return s_0 + 1; +} function _temp(s) { return s + 1; } @@ -45,8 +61,8 @@ function _temp(s) { ## 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":180},"end":{"line":7,"column":12,"index":188},"filename":"invalid-setState-in-useEffect.ts","identifierName":"setState"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null} -{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":92},"end":{"line":10,"column":1,"index":225},"filename":"invalid-setState-in-useEffect.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0} +{"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":187},"end":{"line":7,"column":12,"index":195},"filename":"invalid-setState-in-useEffect.ts","identifierName":"setState"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null} +{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":99},"end":{"line":13,"column":1,"index":290},"filename":"invalid-setState-in-useEffect.ts"},"fnName":"Component","memoSlots":2,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0} ``` ### Eval output diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.js index a95d3642cb8..74d17879079 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.js @@ -1,10 +1,13 @@ // @loggerTestOnly @validateNoSetStateInEffects -import {useEffect, useState} from 'react'; +import React, {useEffect, useState} from 'react'; function Component() { const [state, setState] = useState(0); useEffect(() => { setState(s => s + 1); }); + React.useEffect(() => { + setState(s => s + 1); + }); return state; } From 5f4740956be8c9c6a34609e57ffc7136d6c4e769 Mon Sep 17 00:00:00 2001 From: jynxio Date: Thu, 4 Dec 2025 00:49:56 +0800 Subject: [PATCH 2/2] [compiler] Detect React.useEffect namespace calls The `@validateNoSetStateInEffects` validation now correctly handles both `useEffect()` and `React.useEffect()` patterns. --- .../src/Validation/ValidateNoSetStateInEffects.ts | 2 +- .../fixtures/compiler/invalid-setState-in-useEffect.expect.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) 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 86070e2973e..8e9668ccd3e 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.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.expect.md index e062cb6ba50..f506ced452b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.expect.md @@ -62,6 +62,7 @@ function _temp(s) { ``` {"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":187},"end":{"line":7,"column":12,"index":195},"filename":"invalid-setState-in-useEffect.ts","identifierName":"setState"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null} +{"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":10,"column":4,"index":245},"end":{"line":10,"column":12,"index":253},"filename":"invalid-setState-in-useEffect.ts","identifierName":"setState"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null} {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":99},"end":{"line":13,"column":1,"index":290},"filename":"invalid-setState-in-useEffect.ts"},"fnName":"Component","memoSlots":2,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0} ```