How would you avoid new functions per list item without useCallback?

WHAT THIS TESTS: This question probes whether you understand function identity in React and can optimize large lists without placing hooks inside loops. The interviewer wants to see if you know how to keep a single event handler reference while still accessing dynamic item data. It also checks your mental model of the synthetic event system and whether you reach for data attributes or event delegation instead of closures.

A GOOD ANSWER COVERS: First, define one handler function completely outside the map so its reference stays stable across renders. Second, store the item id in a data attribute such as data-id on each rendered element. Third, inside that single handler read event.currentTarget.dataset.id to identify which item was clicked. This creates exactly one function regardless of list size. An alternative valid approach is event delegation: attach one onClick to the parent container, then use event.target.closest to find the clicked item element and read its dataset. Both approaches avoid allocating N functions every render. You should mention that the benefit is most visible in very large or rapidly updating lists where GC pressure and child re-render overhead accumulate.

COMMON WRONG ANSWERS: Suggesting useCallback inside the map is a rules-of-hooks violation and an immediate red flag. Recommending React.memo on a child component without explaining how the handler itself avoids re-creation misses the point because the child still receives a new inline arrow each render. Producing a handler via bind inside the loop also creates a new function per item. Saying that modern React is fast enough to ignore the issue signals a lack of performance awareness at scale.

LIKELY FOLLOW-UPS: The interviewer may ask how you would handle keyboard accessibility for these items, since divs with onClick are not focusable by default. They might ask how React synthetic event delegation interacts with your solution, or what happens if the list items contain nested interactive elements like buttons. Another follow-up is comparing memory usage between data-attribute handlers and a ref-based lookup map.

ONE CONCRETE EXAMPLE: Imagine a list of ten thousand messages. Instead of messages.map m => div onClick equals an inline arrow calling handleOpen with m.id, you write const handleClick equals e arrow function with const id equals e.currentTarget.dataset.id and then handleOpen id, and render div data-id equals m.id onClick equals handleClick. This uses one function for the entire list. If the container is a ul, you could instead put onClick equals handleContainerClick on the ul and use e.target.closest li to find the message row.

Source: react.dev