Intermediate
Cache an expensive filter with useMemo
filterProducts logs filtering each time it runs. Right now it runs on every render, including when you click #theme, which has nothing to do with the products.
Use useMemo so filtering runs only when the minimum price changes. Clicking #theme must not log filtering.
The #min select chooses a minimum price; #count shows how many products match, like 3 products.
What Check tests
- All 5 products show at first
- Toggling the theme doesn't filter again
- Choosing ₹100 and up shows 3 products and filters once
- Uses useMemo
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.