Intermediate
Remove the unnecessary effect
This fruit filter works, but it stores the filtered list in state and keeps it in sync with an effect. That costs an extra render on every keystroke and, for one frame, shows the old list.
Rewrite FruitFilter so it calculates the visible fruits during render. Remove useEffect from the file. The behaviour must stay the same: typing in #search filters the <li> items (case-insensitive), and #total says Showing N of 6.
What Check tests
- All 6 fruits show at the start
- Typing
gushows only Guava - Typing
A(capital) matches case-insensitively - The file no longer uses
useEffect - The filtered list is not stored in state
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.