What is the problem with using anonymous functions directly in JSX event handlers and how should it be addressed for performance?

Question

React Developer — Hard

What is the problem with using anonymous functions directly in JSX event handlers and how should it be addressed for performance?

Accepted Answer

Using anonymous functions directly in JSX event handlers creates new function references on every render, potentially causing re-renders in child components wrapped in React.memo. By using useCallback to memoize the handler, you can prevent unnecessary re-renders and improve performance.