;
}
export const FIXTURE_ENTRYPOINT = {
@@ -77,8 +56,8 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [value]\n\nData Flow Tree:\n└── value (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":6,"index":244},"end":{"line":9,"column":19,"index":257},"filename":"derived-state-conditionally-in-effect.ts","identifierName":"setLocalValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":16,"column":1,"index":378},"filename":"derived-state-conditionally-in-effect.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [value]\n\nData Flow Tree:\n└── value (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":6,"index":263},"end":{"line":9,"column":19,"index":276},"filename":"derived-state-conditionally-in-effect.ts","identifierName":"setLocalValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":16,"column":1,"index":397},"filename":"derived-state-conditionally-in-effect.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.js
index fb65cbfeb82b..4cdcb53bb236 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.js
@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
import {useEffect, useState} from 'react';
function Component({value, enabled}) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.expect.md
index 2f3a3d0e6160..4db10f4df4cf 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
import {useEffect, useState} from 'react';
export default function Component({input = 'empty'}) {
@@ -26,38 +26,18 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
import { useEffect, useState } from "react";
-export default function Component(t0) {
- const $ = _c(5);
- const { input: t1 } = t0;
- const input = t1 === undefined ? "empty" : t1;
+export default function Component({ input = "empty" }) {
const [currInput, setCurrInput] = useState(input);
- let t2;
- let t3;
- if ($[0] !== input) {
- t2 = () => {
- setCurrInput(input + "local const");
- };
- t3 = [input, "local const"];
- $[0] = input;
- $[1] = t2;
- $[2] = t3;
- } else {
- t2 = $[1];
- t3 = $[2];
- }
- useEffect(t2, t3);
- let t4;
- if ($[3] !== currInput) {
- t4 =
- );
- $[6] = bar;
- $[7] = foo;
- $[8] = t4;
- } else {
- t4 = $[8];
- }
- return t4;
+ const [foo, setFoo] = useState({});
+ const [bar, setBar] = useState(new Set());
+
+ /*
+ * isChanged is considered context of the effect's function expression,
+ * if we don't bail out of effect mutation derivation tracking, isChanged
+ * will inherit the sources of the effect's function expression.
+ *
+ * This is innacurate and with the multiple passes ends up causing an infinite loop.
+ */
+ useEffect(() => {
+ let isChanged = false;
+
+ const newData = foo.map((val) => {
+ bar.someMethod(val);
+ isChanged = true;
+ });
+
+ if (isChanged) {
+ setFoo(newData);
+ }
+ }, [foo, bar]);
+
+ return (
+
+ {foo}, {bar}
+
+ );
}
```
@@ -104,8 +78,8 @@ function Component() {
## Logs
```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [foo, bar]\n\nData Flow Tree:\n└── newData\n ├── foo (State)\n └── bar (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":23,"column":6,"index":663},"end":{"line":23,"column":12,"index":669},"filename":"function-expression-mutation-edge-case.ts","identifierName":"setFoo"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":64},"end":{"line":32,"column":1,"index":762},"filename":"function-expression-mutation-edge-case.ts"},"fnName":"Component","memoSlots":9,"memoBlocks":4,"memoValues":5,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [foo, bar]\n\nData Flow Tree:\n└── newData\n ├── foo (State)\n └── bar (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":23,"column":6,"index":682},"end":{"line":23,"column":12,"index":688},"filename":"function-expression-mutation-edge-case.ts","identifierName":"setFoo"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":83},"end":{"line":32,"column":1,"index":781},"filename":"function-expression-mutation-edge-case.ts"},"fnName":"Component","memoSlots":9,"memoBlocks":4,"memoValues":5,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.js
index ab0bd70f363f..856209928d1c 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.js
@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
function Component() {
const [foo, setFoo] = useState({});
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.expect.md
index 29dea440b463..928b7e9f7129 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
import {useEffect, useState} from 'react';
function Component() {
@@ -28,38 +28,20 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
import { useEffect, useState } from "react";
function Component() {
- const $ = _c(5);
- const [firstName] = useState("Taylor");
+ const [firstName, setFirstName] = useState("Taylor");
+ const lastName = "Swift";
+ // 🔴 Avoid: redundant state and unnecessary Effect
const [fullName, setFullName] = useState("");
- let t0;
- let t1;
- if ($[0] !== firstName) {
- t0 = () => {
- setFullName(firstName + " " + "Swift");
- };
- t1 = [firstName, "Swift"];
- $[0] = firstName;
- $[1] = t0;
- $[2] = t1;
- } else {
- t0 = $[1];
- t1 = $[2];
- }
- useEffect(t0, t1);
- let t2;
- if ($[3] !== fullName) {
- t2 =
;
}
export const FIXTURE_ENTRYPOINT = {
@@ -73,8 +52,8 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [props]\n\nData Flow Tree:\n└── props (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":10,"column":4,"index":269},"end":{"line":10,"column":15,"index":280},"filename":"invalid-derived-state-from-destructured-props.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":122},"end":{"line":14,"column":1,"index":397},"filename":"invalid-derived-state-from-destructured-props.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [props]\n\nData Flow Tree:\n└── props (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":10,"column":4,"index":288},"end":{"line":10,"column":15,"index":299},"filename":"invalid-derived-state-from-destructured-props.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":141},"end":{"line":14,"column":1,"index":416},"filename":"invalid-derived-state-from-destructured-props.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.js
index 3f662f13f71c..abb1643e6921 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.js
@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
import {useEffect, useState} from 'react';
export default function Component({props}) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md
index 7948a49b3a89..70174794dc78 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
import {useEffect, useState, useRef} from 'react';
export default function Component({test}) {
@@ -31,43 +31,23 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
import { useEffect, useState, useRef } from "react";
-export default function Component(t0) {
- const $ = _c(5);
- const { test } = t0;
+export default function Component({ test }) {
const [local, setLocal] = useState(0);
const myRef = useRef(null);
- let t1;
- let t2;
- if ($[0] !== test) {
- t1 = () => {
- if (myRef.current) {
- setLocal(test);
- } else {
- setLocal(test + test);
- }
- };
- t2 = [test];
- $[0] = test;
- $[1] = t1;
- $[2] = t2;
- } else {
- t1 = $[1];
- t2 = $[2];
- }
- useEffect(t1, t2);
- let t3;
- if ($[3] !== local) {
- t3 = <>{local};
- $[3] = local;
- $[4] = t3;
- } else {
- t3 = $[4];
- }
- return t3;
+
+ useEffect(() => {
+ if (myRef.current) {
+ setLocal(test);
+ } else {
+ setLocal(test + test);
+ }
+ }, [test]);
+
+ return <>{local};
}
export const FIXTURE_ENTRYPOINT = {
@@ -80,7 +60,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":130},"end":{"line":18,"column":1,"index":386},"filename":"ref-conditional-in-effect-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":149},"end":{"line":18,"column":1,"index":405},"filename":"ref-conditional-in-effect-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js
index 3594deaa02e9..a5424ab03b2d 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js
@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
import {useEffect, useState, useRef} from 'react';
export default function Component({test}) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.expect.md
index 87cf7722da35..690574e4429b 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
function Component({prop}) {
const [s, setS] = useState();
@@ -26,37 +26,23 @@ function Component({prop}) {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
-function Component(t0) {
- const $ = _c(5);
- const { prop } = t0;
+function Component({ prop }) {
const [s, setS] = useState();
- const [second] = useState(prop);
- let t1;
- let t2;
- if ($[0] !== second) {
- t1 = () => {
- setS(second);
- };
- t2 = [second];
- $[0] = second;
- $[1] = t1;
- $[2] = t2;
- } else {
- t1 = $[1];
- t2 = $[2];
- }
- useEffect(t1, t2);
- let t3;
- if ($[3] !== s) {
- t3 =
{s}
;
- $[3] = s;
- $[4] = t3;
- } else {
- t3 = $[4];
- }
- return t3;
+ const [second, setSecond] = useState(prop);
+
+ /*
+ * `second` is a source of state. It will inherit the value of `prop` in
+ * the first render, but after that it will no longer be updated when
+ * `prop` changes. So we shouldn't consider `second` as being derived from
+ * `prop`
+ */
+ useEffect(() => {
+ setS(second);
+ }, [second]);
+
+ return
{s}
;
}
```
@@ -64,8 +50,8 @@ function Component(t0) {
## Logs
```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [second]\n\nData Flow Tree:\n└── second (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":14,"column":4,"index":443},"end":{"line":14,"column":8,"index":447},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts","identifierName":"setS"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":64},"end":{"line":18,"column":1,"index":500},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [second]\n\nData Flow Tree:\n└── second (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":14,"column":4,"index":462},"end":{"line":14,"column":8,"index":466},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts","identifierName":"setS"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":83},"end":{"line":18,"column":1,"index":519},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.js
index 5a7a693d50b0..3be4e88a07ad 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.js
@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
function Component({prop}) {
const [s, setS] = useState();
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.expect.md
index d82575b8c354..b5c079f5423b 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoJSXInTryStatements
+// @validateNoJSXInTryStatements @outputMode:"lint"
import {identity} from 'shared-runtime';
function Component(props) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js
index 9db091a2fb7e..fbc0d292ce65 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js
@@ -1,4 +1,4 @@
-// @validateNoJSXInTryStatements
+// @validateNoJSXInTryStatements @outputMode:"lint"
import {identity} from 'shared-runtime';
function Component(props) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.expect.md
index e8a29205647e..79ae59e64c11 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoJSXInTryStatements
+// @validateNoJSXInTryStatements @outputMode:"lint"
function Component(props) {
let el;
try {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.js
index f0a17391c0ee..da1682772144 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.js
@@ -1,4 +1,4 @@
-// @validateNoJSXInTryStatements
+// @validateNoJSXInTryStatements @outputMode:"lint"
function Component(props) {
let el;
try {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.expect.md
index 5eaa1fd5040b..6ac06c1df23c 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @loggerTestOnly @validateNoJSXInTryStatements
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
import {identity} from 'shared-runtime';
function Component(props) {
@@ -25,34 +25,17 @@ function Component(props) {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly @validateNoJSXInTryStatements
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
import { identity } from "shared-runtime";
function Component(props) {
- const $ = _c(4);
let el;
try {
let value;
try {
- let t0;
- if ($[0] !== props.foo) {
- t0 = identity(props.foo);
- $[0] = props.foo;
- $[1] = t0;
- } else {
- t0 = $[1];
- }
- value = t0;
+ value = identity(props.foo);
} catch {
- let t0;
- if ($[2] !== value) {
- t0 = ;
- $[2] = value;
- $[3] = t0;
- } else {
- t0 = $[3];
- }
- el = t0;
+ el = ;
}
} catch {
return null;
@@ -65,8 +48,8 @@ function Component(props) {
## Logs
```
-{"kind":"CompileError","detail":{"options":{"category":"ErrorBoundaries","reason":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":11,"column":11,"index":222},"end":{"line":11,"column":32,"index":243},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":91},"end":{"line":17,"column":1,"index":298},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"category":"ErrorBoundaries","reason":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":11,"column":11,"index":241},"end":{"line":11,"column":32,"index":262},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":110},"end":{"line":17,"column":1,"index":317},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.js
index 3cf5cc9b8a60..a036272cdb05 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.js
@@ -1,4 +1,4 @@
-// @loggerTestOnly @validateNoJSXInTryStatements
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
import {identity} from 'shared-runtime';
function Component(props) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.expect.md
index 323aedd869de..1e08cb24a663 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @loggerTestOnly @validateNoJSXInTryStatements
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
function Component(props) {
let el;
try {
@@ -18,19 +18,11 @@ function Component(props) {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly @validateNoJSXInTryStatements
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
function Component(props) {
- const $ = _c(1);
let el;
try {
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- t0 = ;
- $[0] = t0;
- } else {
- t0 = $[0];
- }
- el = t0;
+ el = ;
} catch {
return null;
}
@@ -42,8 +34,8 @@ function Component(props) {
## Logs
```
-{"kind":"CompileError","detail":{"options":{"category":"ErrorBoundaries","reason":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":5,"column":9,"index":104},"end":{"line":5,"column":16,"index":111},"filename":"invalid-jsx-in-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":49},"end":{"line":10,"column":1,"index":160},"filename":"invalid-jsx-in-try-with-catch.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"category":"ErrorBoundaries","reason":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":5,"column":9,"index":123},"end":{"line":5,"column":16,"index":130},"filename":"invalid-jsx-in-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":68},"end":{"line":10,"column":1,"index":179},"filename":"invalid-jsx-in-try-with-catch.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.js
index d01a93bf5afd..45d932ec7c42 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.js
@@ -1,4 +1,4 @@
-// @loggerTestOnly @validateNoJSXInTryStatements
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
function Component(props) {
let el;
try {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.expect.md
index a327d0b8bd6a..5cd44a9c851e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @loggerTestOnly @validateNoSetStateInEffects
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
import {useEffect, useState} from 'react';
function Component() {
@@ -24,48 +24,30 @@ function Component() {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly @validateNoSetStateInEffects
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
import { useEffect, useState } from "react";
function Component() {
- const $ = _c(2);
const [state, setState] = useState(0);
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- const f = () => {
- setState(_temp);
- };
- t0 = () => {
- f();
- };
- $[0] = t0;
- } else {
- t0 = $[0];
- }
- const g = t0;
- let t1;
- if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
- t1 = () => {
- g();
- };
- $[1] = t1;
- } else {
- t1 = $[1];
- }
- useEffect(t1);
+ const f = () => {
+ setState((s) => s + 1);
+ };
+ const g = () => {
+ f();
+ };
+ useEffect(() => {
+ g();
+ });
return state;
}
-function _temp(s) {
- return s + 1;
-}
```
## 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":13,"column":4,"index":265},"end":{"line":13,"column":5,"index":266},"filename":"invalid-setState-in-useEffect-transitive.ts","identifierName":"g"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":92},"end":{"line":16,"column":1,"index":293},"filename":"invalid-setState-in-useEffect-transitive.ts"},"fnName":"Component","memoSlots":2,"memoBlocks":2,"memoValues":2,"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":13,"column":4,"index":284},"end":{"line":13,"column":5,"index":285},"filename":"invalid-setState-in-useEffect-transitive.ts","identifierName":"g"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":16,"column":1,"index":312},"filename":"invalid-setState-in-useEffect-transitive.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-transitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.js
index 50007c0bd13a..ef69e4be4339 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.js
@@ -1,4 +1,4 @@
-// @loggerTestOnly @validateNoSetStateInEffects
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
import {useEffect, useState} from 'react';
function Component() {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.expect.md
index 946169205f0a..144cb7a52289 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @loggerTestOnly @validateNoSetStateInEffects
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
import {useEffect, useEffectEvent, useState} from 'react';
function Component() {
@@ -21,40 +21,17 @@ function Component() {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly @validateNoSetStateInEffects
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
import { useEffect, useEffectEvent, useState } from "react";
function Component() {
- const $ = _c(4);
const [state, setState] = useState(0);
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- t0 = () => {
- setState(true);
- };
- $[0] = t0;
- } else {
- t0 = $[0];
- }
- const effectEvent = useEffectEvent(t0);
- let t1;
- if ($[1] !== effectEvent) {
- t1 = () => {
- effectEvent();
- };
- $[1] = effectEvent;
- $[2] = t1;
- } else {
- t1 = $[2];
- }
- let t2;
- if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
- t2 = [];
- $[3] = t2;
- } else {
- t2 = $[3];
- }
- useEffect(t1, t2);
+ const effectEvent = useEffectEvent(() => {
+ setState(true);
+ });
+ useEffect(() => {
+ effectEvent();
+ }, []);
return state;
}
@@ -63,8 +40,8 @@ function Component() {
## 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":10,"column":4,"index":267},"end":{"line":10,"column":15,"index":278},"filename":"invalid-setState-in-useEffect-via-useEffectEvent.ts","identifierName":"effectEvent"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":108},"end":{"line":13,"column":1,"index":309},"filename":"invalid-setState-in-useEffect-via-useEffectEvent.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":3,"memoValues":3,"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":10,"column":4,"index":286},"end":{"line":10,"column":15,"index":297},"filename":"invalid-setState-in-useEffect-via-useEffectEvent.ts","identifierName":"effectEvent"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":127},"end":{"line":13,"column":1,"index":328},"filename":"invalid-setState-in-useEffect-via-useEffectEvent.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.js
index a838e58564ec..823ace42c347 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-via-useEffectEvent.js
@@ -1,4 +1,4 @@
-// @loggerTestOnly @validateNoSetStateInEffects
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
import {useEffect, useEffectEvent, useState} from 'react';
function Component() {
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 3c3a5a8053ad..5022b5517188 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
@@ -2,7 +2,7 @@
## Input
```javascript
-// @loggerTestOnly @validateNoSetStateInEffects
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
import {useEffect, useState} from 'react';
function Component() {
@@ -18,35 +18,24 @@ function Component() {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly @validateNoSetStateInEffects
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
import { useEffect, useState } from "react";
function Component() {
- const $ = _c(1);
const [state, setState] = useState(0);
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- t0 = () => {
- setState(_temp);
- };
- $[0] = t0;
- } else {
- t0 = $[0];
- }
- useEffect(t0);
+ useEffect(() => {
+ setState((s) => s + 1);
+ });
return state;
}
-function _temp(s) {
- return s + 1;
-}
```
## 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":199},"end":{"line":7,"column":12,"index":207},"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":111},"end":{"line":10,"column":1,"index":244},"filename":"invalid-setState-in-useEffect.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"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 a95d3642cb8d..d2422caea022 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,4 +1,4 @@
-// @loggerTestOnly @validateNoSetStateInEffects
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
import {useEffect, useState} from 'react';
function Component() {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md
index b6895fc396d9..6625f0153e8a 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
let Component;
if (props.cond) {
@@ -18,31 +18,15 @@ function Example(props) {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
- const $ = _c(3);
let Component;
if (props.cond) {
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- t0 = createComponent();
- $[0] = t0;
- } else {
- t0 = $[0];
- }
- Component = t0;
+ Component = createComponent();
} else {
Component = DefaultComponent;
}
- let t0;
- if ($[1] !== Component) {
- t0 = ;
- $[1] = Component;
- $[2] = t0;
- } else {
- t0 = $[2];
- }
- return t0;
+ return ;
}
```
@@ -50,8 +34,8 @@ function Example(props) {
## Logs
```
-{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":9,"column":10,"index":202},"end":{"line":9,"column":19,"index":211},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":5,"column":16,"index":124},"end":{"line":5,"column":33,"index":141},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":10,"column":1,"index":217},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"fnName":"Example","memoSlots":3,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":9,"column":10,"index":221},"end":{"line":9,"column":19,"index":230},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":5,"column":16,"index":143},"end":{"line":5,"column":33,"index":160},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":64},"end":{"line":10,"column":1,"index":236},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"fnName":"Example","memoSlots":3,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.js
index 6ff7ff321c33..1022cc9d5752 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.js
@@ -1,4 +1,4 @@
-// @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
let Component;
if (props.cond) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md
index 3d9f1f76f96c..c6441bc4cb1e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
const Component = createComponent();
return ;
@@ -13,18 +13,10 @@ function Example(props) {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
- const $ = _c(1);
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- const Component = createComponent();
- t0 = ;
- $[0] = t0;
- } else {
- t0 = $[0];
- }
- return t0;
+ const Component = createComponent();
+ return ;
}
```
@@ -32,8 +24,8 @@ function Example(props) {
## Logs
```
-{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":120},"end":{"line":4,"column":19,"index":129},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":37,"index":108},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":5,"column":1,"index":135},"filename":"invalid-dynamically-construct-component-in-render.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":139},"end":{"line":4,"column":19,"index":148},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":110},"end":{"line":3,"column":37,"index":127},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":64},"end":{"line":5,"column":1,"index":154},"filename":"invalid-dynamically-construct-component-in-render.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.js
index 209cc83d65a2..8992b8bf7c75 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.js
@@ -1,4 +1,4 @@
-// @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
const Component = createComponent();
return ;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md
index 374c28ffd19d..0882c4a10037 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
function Component() {
return ;
@@ -15,20 +15,12 @@ function Example(props) {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
- const $ = _c(1);
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- const Component = function Component() {
- return ;
- };
- t0 = ;
- $[0] = t0;
- } else {
- t0 = $[0];
+ function Component() {
+ return ;
}
- return t0;
+ return ;
}
```
@@ -36,8 +28,8 @@ function Example(props) {
## Logs
```
-{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":6,"column":10,"index":130},"end":{"line":6,"column":19,"index":139},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":2,"index":73},"end":{"line":5,"column":3,"index":119},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":7,"column":1,"index":145},"filename":"invalid-dynamically-constructed-component-function.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":6,"column":10,"index":149},"end":{"line":6,"column":19,"index":158},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":2,"index":92},"end":{"line":5,"column":3,"index":138},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":64},"end":{"line":7,"column":1,"index":164},"filename":"invalid-dynamically-constructed-component-function.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.js
index e48712dbf75c..123fb043eb19 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.js
@@ -1,4 +1,4 @@
-// @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
function Component() {
return ;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md
index 860490581b1d..707a0a958502 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
const Component = props.foo.bar();
return ;
@@ -13,27 +13,10 @@ function Example(props) {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
- const $ = _c(4);
- let t0;
- if ($[0] !== props.foo) {
- t0 = props.foo.bar();
- $[0] = props.foo;
- $[1] = t0;
- } else {
- t0 = $[1];
- }
- const Component = t0;
- let t1;
- if ($[2] !== Component) {
- t1 = ;
- $[2] = Component;
- $[3] = t1;
- } else {
- t1 = $[3];
- }
- return t1;
+ const Component = props.foo.bar();
+ return ;
}
```
@@ -41,8 +24,8 @@ function Example(props) {
## Logs
```
-{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":118},"end":{"line":4,"column":19,"index":127},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":35,"index":106},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":5,"column":1,"index":133},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"fnName":"Example","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":137},"end":{"line":4,"column":19,"index":146},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":110},"end":{"line":3,"column":35,"index":125},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":64},"end":{"line":5,"column":1,"index":152},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"fnName":"Example","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.js
index 7f43ffacbd45..7392c74adccb 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.js
@@ -1,4 +1,4 @@
-// @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
const Component = props.foo.bar();
return ;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md
index 8dbcf0f108af..2607ef63d8da 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
const Component = new ComponentFactory();
return ;
@@ -13,18 +13,10 @@ function Example(props) {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
- const $ = _c(1);
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- const Component = new ComponentFactory();
- t0 = ;
- $[0] = t0;
- } else {
- t0 = $[0];
- }
- return t0;
+ const Component = new ComponentFactory();
+ return ;
}
```
@@ -32,8 +24,8 @@ function Example(props) {
## Logs
```
-{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":125},"end":{"line":4,"column":19,"index":134},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":42,"index":113},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":5,"column":1,"index":140},"filename":"invalid-dynamically-constructed-component-new.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":144},"end":{"line":4,"column":19,"index":153},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":110},"end":{"line":3,"column":42,"index":132},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":64},"end":{"line":5,"column":1,"index":159},"filename":"invalid-dynamically-constructed-component-new.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.js
index a735e076d998..4b4e3f7f0240 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.js
@@ -1,4 +1,4 @@
-// @loggerTestOnly @validateStaticComponents
+// @loggerTestOnly @validateStaticComponents @outputMode:"lint"
function Example(props) {
const Component = new ComponentFactory();
return ;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.expect.md
index e60888bafc64..8e9d259fa715 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoSetStateInEffects
+// @validateNoSetStateInEffects @outputMode:"lint"
import {useState, useRef, useEffect} from 'react';
function Tooltip() {
@@ -27,28 +27,18 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects
+// @validateNoSetStateInEffects @outputMode:"lint"
import { useState, useRef, useEffect } from "react";
function Tooltip() {
- const $ = _c(2);
const ref = useRef(null);
const [tooltipHeight, setTooltipHeight] = useState(0);
- let t0;
- let t1;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- t0 = () => {
- const { height } = ref.current.getBoundingClientRect();
- setTooltipHeight(height);
- };
- t1 = [];
- $[0] = t0;
- $[1] = t1;
- } else {
- t0 = $[0];
- t1 = $[1];
- }
- useEffect(t0, t1);
+
+ useEffect(() => {
+ const { height } = ref.current.getBoundingClientRect();
+ setTooltipHeight(height);
+ }, []);
+
return tooltipHeight;
}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.js
index e27292c0a8a8..88201926788c 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-set-state-in-useEffect-from-ref.js
@@ -1,4 +1,4 @@
-// @validateNoSetStateInEffects
+// @validateNoSetStateInEffects @outputMode:"lint"
import {useState, useRef, useEffect} from 'react';
function Tooltip() {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.expect.md
index ee19358f3fb0..845711d24be7 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import {useState, useRef, useLayoutEffect} from 'react';
function Component() {
@@ -26,34 +26,17 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import { useState, useRef, useLayoutEffect } from "react";
function Component() {
- const $ = _c(3);
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- t0 = { size: 5 };
- $[0] = t0;
- } else {
- t0 = $[0];
- }
- const ref = useRef(t0);
+ const ref = useRef({ size: 5 });
const [computedSize, setComputedSize] = useState(0);
- let t1;
- let t2;
- if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
- t1 = () => {
- setComputedSize(ref.current.size * 10);
- };
- t2 = [];
- $[1] = t1;
- $[2] = t2;
- } else {
- t1 = $[1];
- t2 = $[2];
- }
- useLayoutEffect(t1, t2);
+
+ useLayoutEffect(() => {
+ setComputedSize(ref.current.size * 10);
+ }, []);
+
return computedSize;
}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.js
index d312b139b701..c6903f893327 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-arithmetic.js
@@ -1,4 +1,4 @@
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import {useState, useRef, useLayoutEffect} from 'react';
function Component() {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.expect.md
index a7c3714b18f8..269bda83ce96 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import {useState, useRef, useEffect} from 'react';
function Component() {
@@ -27,34 +27,18 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import { useState, useRef, useEffect } from "react";
function Component() {
- const $ = _c(3);
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- t0 = [1, 2, 3, 4, 5];
- $[0] = t0;
- } else {
- t0 = $[0];
- }
- const ref = useRef(t0);
+ const ref = useRef([1, 2, 3, 4, 5]);
const [value, setValue] = useState(0);
- let t1;
- let t2;
- if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
- t1 = () => {
- setValue(ref.current[2]);
- };
- t2 = [];
- $[1] = t1;
- $[2] = t2;
- } else {
- t1 = $[1];
- t2 = $[2];
- }
- useEffect(t1, t2);
+
+ useEffect(() => {
+ const index = 2;
+ setValue(ref.current[index]);
+ }, []);
+
return value;
}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.js
index 90459ac445cf..a5cfd5c2b2bd 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-array-index.js
@@ -1,4 +1,4 @@
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import {useState, useRef, useEffect} from 'react';
function Component() {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.expect.md
index 85796abb964f..ce186bcddf44 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import {useState, useRef, useEffect} from 'react';
function Component() {
@@ -33,33 +33,24 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import { useState, useRef, useEffect } from "react";
function Component() {
- const $ = _c(2);
const ref = useRef(null);
const [width, setWidth] = useState(0);
- let t0;
- let t1;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- t0 = () => {
- const getBoundingRect = function getBoundingRect(ref_0) {
- if (ref_0.current) {
- return ref_0.current.getBoundingClientRect?.()?.width ?? 100;
- }
- return 100;
- };
- setWidth(getBoundingRect(ref));
- };
- t1 = [];
- $[0] = t0;
- $[1] = t1;
- } else {
- t0 = $[0];
- t1 = $[1];
- }
- useEffect(t0, t1);
+
+ useEffect(() => {
+ function getBoundingRect(ref_0) {
+ if (ref_0.current) {
+ return ref_0.current.getBoundingClientRect?.()?.width ?? 100;
+ }
+ return 100;
+ }
+
+ setWidth(getBoundingRect(ref));
+ }, []);
+
return width;
}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.js
index e37b3f3ea2b4..8b92e7c5fd0d 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-effect-from-ref-function-call.js
@@ -1,4 +1,4 @@
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import {useState, useRef, useEffect} from 'react';
function Component() {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.expect.md
index 182b44f642d7..6570731d290e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer"
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer" @outputMode:"lint"
import {useState, useRef, useEffect} from 'react';
function Component({x, y}) {
@@ -48,39 +48,26 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer"
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer" @outputMode:"lint"
import { useState, useRef, useEffect } from "react";
-function Component(t0) {
- const $ = _c(4);
- const { x, y } = t0;
+function Component({ x, y }) {
const previousXRef = useRef(null);
const previousYRef = useRef(null);
const [data, setData] = useState(null);
- let t1;
- let t2;
- if ($[0] !== x || $[1] !== y) {
- t1 = () => {
- const previousX = previousXRef.current;
- previousXRef.current = x;
- const previousY = previousYRef.current;
- previousYRef.current = y;
- if (!areEqual(x, previousX) || !areEqual(y, previousY)) {
- const data_0 = load({ x, y });
- setData(data_0);
- }
- };
- t2 = [x, y];
- $[0] = x;
- $[1] = y;
- $[2] = t1;
- $[3] = t2;
- } else {
- t1 = $[2];
- t2 = $[3];
- }
- useEffect(t1, t2);
+
+ useEffect(() => {
+ const previousX = previousXRef.current;
+ previousXRef.current = x;
+ const previousY = previousYRef.current;
+ previousYRef.current = y;
+ if (!areEqual(x, previousX) || !areEqual(y, previousY)) {
+ const data_0 = load({ x, y });
+ setData(data_0);
+ }
+ }, [x, y]);
+
return data;
}
@@ -107,7 +94,7 @@ export const FIXTURE_ENTRYPOINT = {
## Logs
```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":163},"end":{"line":22,"column":1,"index":631},"filename":"valid-setState-in-useEffect-controlled-by-ref-value.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":1,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":182},"end":{"line":22,"column":1,"index":650},"filename":"valid-setState-in-useEffect-controlled-by-ref-value.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":1,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
```
### Eval output
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.js
index 46f11057d118..4e884e1c65de 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-controlled-by-ref-value.js
@@ -1,4 +1,4 @@
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer"
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @loggerTestOnly @compilationMode:"infer" @outputMode:"lint"
import {useState, useRef, useEffect} from 'react';
function Component({x, y}) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.expect.md
index ac55bd046993..da69a338f8a6 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoSetStateInEffects
+// @validateNoSetStateInEffects @outputMode:"lint"
import {useEffect, useState} from 'react';
function Component() {
@@ -26,26 +26,17 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects
+// @validateNoSetStateInEffects @outputMode:"lint"
import { useEffect, useState } from "react";
function Component() {
- const $ = _c(1);
const [state, setState] = useState(0);
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- t0 = () => {
- const f = () => {
- setState();
- };
-
- setTimeout(() => f(), 10);
+ useEffect(() => {
+ const f = () => {
+ setState();
};
- $[0] = t0;
- } else {
- t0 = $[0];
- }
- useEffect(t0);
+ setTimeout(() => f(), 10);
+ });
return state;
}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.js
index 525f3e97d191..f5255fd4b508 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener-transitive.js
@@ -1,4 +1,4 @@
-// @validateNoSetStateInEffects
+// @validateNoSetStateInEffects @outputMode:"lint"
import {useEffect, useState} from 'react';
function Component() {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.expect.md
index a7deed9afb09..7a5718a17103 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoSetStateInEffects
+// @validateNoSetStateInEffects @outputMode:"lint"
import {useEffect, useState} from 'react';
function Component() {
@@ -23,22 +23,14 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects
+// @validateNoSetStateInEffects @outputMode:"lint"
import { useEffect, useState } from "react";
function Component() {
- const $ = _c(1);
const [state, setState] = useState(0);
- let t0;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- t0 = () => {
- setTimeout(setState, 10);
- };
- $[0] = t0;
- } else {
- t0 = $[0];
- }
- useEffect(t0);
+ useEffect(() => {
+ setTimeout(setState, 10);
+ });
return state;
}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.js
index 723e4841f6d3..68f5da981fc6 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useEffect-listener.js
@@ -1,4 +1,4 @@
-// @validateNoSetStateInEffects
+// @validateNoSetStateInEffects @outputMode:"lint"
import {useEffect, useState} from 'react';
function Component() {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.expect.md
index cacd46bfe42a..9a926dc2231e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.expect.md
@@ -2,7 +2,7 @@
## Input
```javascript
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import {useState, useRef, useLayoutEffect} from 'react';
function Tooltip() {
@@ -27,28 +27,18 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import { useState, useRef, useLayoutEffect } from "react";
function Tooltip() {
- const $ = _c(2);
const ref = useRef(null);
const [tooltipHeight, setTooltipHeight] = useState(0);
- let t0;
- let t1;
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
- t0 = () => {
- const { height } = ref.current.getBoundingClientRect();
- setTooltipHeight(height);
- };
- t1 = [];
- $[0] = t0;
- $[1] = t1;
- } else {
- t0 = $[0];
- t1 = $[1];
- }
- useLayoutEffect(t0, t1);
+
+ useLayoutEffect(() => {
+ const { height } = ref.current.getBoundingClientRect();
+ setTooltipHeight(height);
+ }, []);
+
return tooltipHeight;
}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.js
index 339b550730d7..b41b2c1e7ce5 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-setState-in-useLayoutEffect-from-ref.js
@@ -1,4 +1,4 @@
-// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects
+// @validateNoSetStateInEffects @enableAllowSetStateFromRefsInEffects @outputMode:"lint"
import {useState, useRef, useLayoutEffect} from 'react';
function Tooltip() {