Compare commits
2 Commits
asserts-st
...
pr35099
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0fae264d51 | ||
|
|
2ac39db287 |
@@ -272,12 +272,10 @@ function runWithEnvironment(
|
|||||||
validateNoSetStateInRender(hir).unwrap();
|
validateNoSetStateInRender(hir).unwrap();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (env.config.validateNoDerivedComputationsInEffects) {
|
|
||||||
validateNoDerivedComputationsInEffects(hir);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (env.config.validateNoDerivedComputationsInEffects_exp) {
|
if (env.config.validateNoDerivedComputationsInEffects_exp) {
|
||||||
env.logErrors(validateNoDerivedComputationsInEffects_exp(hir));
|
env.logErrors(validateNoDerivedComputationsInEffects_exp(hir));
|
||||||
|
} else if (env.config.validateNoDerivedComputationsInEffects) {
|
||||||
|
validateNoDerivedComputationsInEffects(hir);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (env.config.validateNoSetStateInEffects) {
|
if (env.config.validateNoSetStateInEffects) {
|
||||||
|
|||||||
@@ -2,17 +2,23 @@
|
|||||||
## Input
|
## Input
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// @validateNoDerivedComputationsInEffects_exp
|
// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
|
||||||
|
|
||||||
function Component({ prop }) {
|
function Component({prop}) {
|
||||||
const [s, setS] = useState(prop)
|
const [s, setS] = useState();
|
||||||
const [second, setSecond] = useState(prop)
|
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(() => {
|
useEffect(() => {
|
||||||
setS(second)
|
setS(second);
|
||||||
}, [second])
|
}, [second]);
|
||||||
|
|
||||||
return <div>{s}</div>
|
return <div>{s}</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
@@ -20,12 +26,12 @@ function Component({ prop }) {
|
|||||||
## Code
|
## Code
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
|
import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
|
||||||
|
|
||||||
function Component(t0) {
|
function Component(t0) {
|
||||||
const $ = _c(5);
|
const $ = _c(5);
|
||||||
const { prop } = t0;
|
const { prop } = t0;
|
||||||
const [s, setS] = useState(prop);
|
const [s, setS] = useState();
|
||||||
const [second] = useState(prop);
|
const [second] = useState(prop);
|
||||||
let t1;
|
let t1;
|
||||||
let t2;
|
let t2;
|
||||||
@@ -55,5 +61,12 @@ 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}
|
||||||
|
```
|
||||||
|
|
||||||
### Eval output
|
### Eval output
|
||||||
(kind: exception) Fixture not implemented
|
(kind: exception) Fixture not implemented
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
// @validateNoDerivedComputationsInEffects_exp
|
// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
|
||||||
|
|
||||||
function Component({prop}) {
|
function Component({prop}) {
|
||||||
const [s, setS] = useState();
|
const [s, setS] = useState();
|
||||||
|
|||||||
Reference in New Issue
Block a user