|
2 | 2 | ## Input |
3 | 3 |
|
4 | 4 | ```javascript |
5 | | -// @validateNoDerivedComputationsInEffects_exp |
| 5 | +// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly |
6 | 6 |
|
7 | | -function Component({ prop }) { |
8 | | - const [s, setS] = useState(prop) |
9 | | - const [second, setSecond] = useState(prop) |
| 7 | +function Component({prop}) { |
| 8 | + const [s, setS] = useState(); |
| 9 | + const [second, setSecond] = useState(prop); |
10 | 10 |
|
| 11 | + /* |
| 12 | + * `second` is a source of state. It will inherit the value of `prop` in |
| 13 | + * the first render, but after that it will no longer be updated when |
| 14 | + * `prop` changes. So we shouldn't consider `second` as being derived from |
| 15 | + * `prop` |
| 16 | + */ |
11 | 17 | useEffect(() => { |
12 | | - setS(second) |
13 | | - }, [second]) |
| 18 | + setS(second); |
| 19 | + }, [second]); |
14 | 20 |
|
15 | | - return <div>{s}</div> |
| 21 | + return <div>{s}</div>; |
16 | 22 | } |
17 | 23 |
|
18 | 24 | ``` |
19 | 25 |
|
20 | 26 | ## Code |
21 | 27 |
|
22 | 28 | ```javascript |
23 | | -import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp |
| 29 | +import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly |
24 | 30 |
|
25 | 31 | function Component(t0) { |
26 | 32 | const $ = _c(5); |
27 | 33 | const { prop } = t0; |
28 | | - const [s, setS] = useState(prop); |
| 34 | + const [s, setS] = useState(); |
29 | 35 | const [second] = useState(prop); |
30 | 36 | let t1; |
31 | 37 | let t2; |
@@ -54,6 +60,13 @@ function Component(t0) { |
54 | 60 | } |
55 | 61 |
|
56 | 62 | ``` |
| 63 | + |
| 64 | +## Logs |
| 65 | + |
| 66 | +``` |
| 67 | +{"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} |
| 68 | +{"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} |
| 69 | +``` |
57 | 70 | |
58 | 71 | ### Eval output |
59 | 72 | (kind: exception) Fixture not implemented |
0 commit comments