[compiler] Prevent local state source variables from depending on other state (#35044)

Summary:
When a local state is created sometimes it uses a `prop` or even other
local state for its initial value.

This value is only relevant on first render so we shouldn't consider it
part of our data flow

Test Plan:
Added tests
This commit is contained in:
Jorge Cabiedes
2025-11-10 12:29:34 -08:00
committed by GitHub
parent 92ac4e8b80
commit 100fc4a8cf
3 changed files with 85 additions and 2 deletions

View File

@@ -358,8 +358,14 @@ function recordInstructionDerivations(
context.effects.add(effectFunction.loweredFunc.func);
}
} else if (isUseStateType(lvalue.identifier) && value.args.length > 0) {
isSource = true;
typeOfValue = joinValue(typeOfValue, 'fromState');
typeOfValue = 'fromState';
context.derivationCache.addDerivationEntry(
lvalue,
new Set(),
typeOfValue,
true,
);
return;
}
}

View File

@@ -0,0 +1,59 @@
## Input
```javascript
// @validateNoDerivedComputationsInEffects_exp
function Component({ prop }) {
const [s, setS] = useState(prop)
const [second, setSecond] = useState(prop)
useEffect(() => {
setS(second)
}, [second])
return <div>{s}</div>
}
```
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
function Component(t0) {
const $ = _c(5);
const { prop } = t0;
const [s, setS] = useState(prop);
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 = <div>{s}</div>;
$[3] = s;
$[4] = t3;
} else {
t3 = $[4];
}
return t3;
}
```
### Eval output
(kind: exception) Fixture not implemented

View File

@@ -0,0 +1,18 @@
// @validateNoDerivedComputationsInEffects_exp
function Component({prop}) {
const [s, setS] = useState();
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 <div>{s}</div>;
}