How would you avoid new functions per list item without useCallback?
Tests stable handler patterns for large lists. Answer: define one handler outside the map, attach it to every item, and read the id from a data-id attribute via currentTarget.dataset.id. Or use event delegation on the parent. Red flag: useCallback in loop.
WHAT IT TESTS: Event handler identity and scalable list interaction patterns. ANSWER OUTLINE: Define one stable handler outside the map, store each item id in a data-id attribute on the element, and read it via event.currentTarget.dataset.id when clicked. Alternatively, attach a single onClick to the parent container and use event.target.closest to resolve the item. RED FLAG: Proposing useCallback inside the loop violates Rules of Hooks; suggesting React.memo on a child without explaining how the handler itself stays stable misses the point.
Read the original → react.dev
- #react
- #performance
- #event-handlers
- #lists
- #interview
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.