Según la documentación de React.js , la expresión:
onClick={() => this.handleClick()}no es recomendado:
En la mayoría de los casos, esto está bien. Sin embargo, si esta devolución de llamada se pasa como accesorio a los componentes inferiores, esos componentes podrían volver a renderizarse más.
Pero, ¿en qué casos y por qué sucede? ¿Alguien puede explicar o dar un ejemplo?
si usa esta devolución de llamada solo en una etiqueta html simple, creo que debería estar bien. pero el problema es dónde pasa este tipo de devoluciones de llamada como accesorio a un componente secundario. si su componente de nivel superior se vuelve a renderizar y no desea volver a renderizar el componente secundario, si usa memo en el componente secundario, se vuelve a renderizar de todos modos porque cuando el componente de nivel superior vuelve a renderizar esa devolución de llamada se recrea y cada vez que verifica la prop anterior y siguiente del niño componente es nuevo cada vez.
================== TopComponent (props) ============ +------- Child Component - (onClick={()=> console.log('rerendered every time')}) --+ | memo check funciton ===>(prev,next) => prev===next | +----------------------------------------------------------------------------------+ ===============================