-
Notifications
You must be signed in to change notification settings - Fork 50k
Open
Labels
Status: UnconfirmedA potential issue that we haven't yet confirmed as a bugA potential issue that we haven't yet confirmed as a bug
Description
The compiler seems to mix dependency in some condition and nest block incorrectly.
React version: 19.2
Issue demo : React Compiler Playground
Steps To Reproduce
- I create a component with 2 states that won't interact, and array and a counter (React Compiler Playground Link)
export default function MyApp() {
const [count, setCount] = useState(0);
const [items, setItems] = useState([1, 2, 3, 4, 5])
const filteredItems = items.filter(v => v%2 === 0)
const increment = () => {
setCount(v => v+1)
}
const addItem = () => {
setItems(v => [...v, v.length + 1])
}
return <div>
<p>Compteur {count}</p>
<button onClick={increment}>Incrémenter</button>
<ul>
{filteredItems.map(item => <li key={item}>{item}</li>)}
<button onClick={addItem}>Add Item</button>
</ul>
</div>
}- I would expect
filteredItemto be memoised with "items" as a dependency. But it produce this code
// Compiler output
if ($[1] !== count || $[2] !== items) {
const filteredItems = items.filter(_temp);
let t5;
if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
t5 = () => {
setCount(_temp2);
};
$[7] = t5;
} else {
t5 = $[7];
}
let t2
// Expected output
if ($[1] !== items) {
t2 = items.filter(_temp);
$[1] = items
$[2] = filteredItems
} else {
t2= $[2];
}The current behavior
It groups everything after the filteredItems inside a condition
The expected behavior
filteredItemsshould be memoised- The 3 children of the virtual dom should be in their own condition with the right dependency
Metadata
Metadata
Assignees
Labels
Status: UnconfirmedA potential issue that we haven't yet confirmed as a bugA potential issue that we haven't yet confirmed as a bug