#048Derived State Stored in useState
react.medREACT
1function ProductList({ products }) {
2 const [filter, setFilter] = useState('');
3 const [filtered, setFiltered] = useState(products);
4
5 function handleFilter(e) {
6 const q = e.target.value;
7 setFilter(q);
8 setFiltered(products.filter(p => p.name.includes(q)));
9 }
10
11 // When products prop updates, filtered stays stale
12 return <ul>{filtered.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
13}
no lines flagged
#048PracticeMedium15 min · 120 XP
Derived State Stored in useState
A filtered list gets out of sync with its source because derived state is stored in separate useState instead of being computed.
Flagged lines
No lines flagged yet
What's wrong?
Flag a line or write a note to submit.