How to pass a parameter to an event handler or callback?

0-2 years experience

1. 1Imagine you're building a simple shopping cart. You have a list of items, and each has a 'Delete' button. How would you write the onClick handler so that it knows exactly which item ID to delete when clicked?
2. 2A junior developer on your team wrote onClick={handleDelete(item.id)} and now the delete function runs automatically on every single render, crashing the app. What's happening here, and how would you fix it?
3. 3If you use an inline arrow function like onClick={() => handleClick(id)}, how do you also get access to the native React synthetic event object if you need to call preventDefault()?

2-5 years experience

1. 1We have a large product catalog page rendering hundreds of items. If we pass an inline arrow function like onClick={() => handleSelect(item.id)} to every item, it triggers re-renders of the child components because the function reference changes on every render. How would you refactor this to prevent unnecessary re-renders of the child items?
2. 2Let's say you decide to use HTML5 data-* attributes (like data-id={item.id}) on a button to avoid creating inline arrow functions. What are the pros and cons of this approach compared to using a curried function or useCallback?
3. 3You're debugging a search filter where the callback is wrapped in a useCallback. However, when you pass the current search query parameter to the handler, it always seems to use a stale value from the previous render. How would you diagnose and fix this stale closure issue?

5-8 years experience

1. 1We're building a highly interactive data grid with thousands of cells, each requiring click and hover handlers. Creating individual callback references for every cell is causing noticeable garbage collection pauses and memory overhead. How would you design an event delegation strategy at the grid container level to handle this efficiently in React?
2. 2When designing a reusable UI library component (like a generic List or Table), how do you design the API for item click handlers? Would you expose a single onItemClick(id, event) on the parent, or require consumers to pass handlers to individual child components? What are the API design and performance tradeoffs?

8+ years experience

1. 1In a massive monorepo with hundreds of developers, we're seeing inconsistent patterns for event handling—some teams use inline arrows, some use currying, some use useCallback everywhere blindly, which actually degrades performance. How would you define, document, and programmatically enforce a standardized event-handling and callback pattern across the organization?
2. 2We are migrating a legacy React application with heavy class components to functional components. The legacy code relies heavily on .bind(this, param) in the render method. What is your strategy for refactoring these patterns safely at scale without introducing regression bugs or performance regressions in critical rendering paths?