Intermediate
Make memo work with a stable callback
The list items are wrapped in memo, but each still re-renders when you click #bump (the visit counter), because App passes a new onRemove function on every render. Each item logs Item rendered: <name>.
Fix it so clicking #bump doesn't re-render any item, while the Remove buttons (class remove) still delete the right item.
Use useCallback (with the updater form of the state setter, so the callback needs no dependencies).
What Check tests
- Three items are shown
- Clicking Visits re-renders no item
- Remove deletes the right item
- Removing again still works (no stale list)
- Uses useCallback
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.