Difficulty: 5/10Event Handling, Performance Optimization, React HooksYou can use an arrow function to wrap around an event handler and pass parameters:CopyThis is equivalent to calling .bind as below:CopyScenario Questions0-2 years experience1Imagine 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?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?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()?Follow-up QuestionsHow does React's synthetic event pooling affect how we pass events to asynchronous callbacks?When does using useCallback actually hurt performance more than just using an inline arrow function?How would you handle passing multiple dynamic parameters without creating new object references on every render?Suggest Improvement