Q1. How do you pass extra arguments to event handlers?
You can use an arrow function that calls the handler with arguments: onClick={() => handleClick(id)}. Alternatively, use the bind method: onClick={handleClick.bind(this, id)}. Arrow functions are more common.
Q2. What is the performance implication of using arrow functions in render?
Using arrow functions in render creates a new function on every render, which can cause unnecessary re-renders in child components if they rely on referential equality. However, for most small applications, this is not a major issue. To optimize, you can use useCallback or bind in the constructor.
Q3. How do you access the event object along with custom arguments?
In an arrow function, you can pass the event as the first argument: onClick={(e) => handleClick(id, e)}. The event object is provided by React. In the bind approach, the event is automatically passed after the bound arguments.
Q4. Can you pass arguments in a way that avoids creating new functions on each render?
Yes, you can use the useCallback hook to memoize the function, and then use data attributes to pass values. For example, set a data-id attribute on the element and read it from e.target.dataset.id inside the handler.
Q5. Why might you prefer using data attributes over arrow functions?
Data attributes allow you to pass values without creating new functions. This can be more performant in large lists where many elements need handlers. However, it requires accessing the DOM element, which may not always be desirable.