Por qué las funciones de flecha y el enlace en el renderizado de React son problemáticos

(Sugerencia: hace que shouldComponentUpdate y PureComponent estén de mal humor)

En una publicación anterior, expliqué cómo extraer componentes secundarios de React para evitar el uso de funciones de enlace o flecha en el render. Pero no proporcioné una demostración clara para mostrar por qué esto es útil.

He aquí un ejemplo rápido.

En este ejemplo, estoy usando una función de flecha en el renderizado para vincular la ID de usuario relevante a cada botón de eliminación.

En la línea 35, estoy usando una función de flecha para pasar un valor a la función deleteUser. Eso es un problema.

Para ver por qué, consulte User.js (haga clic en el icono de hamburguesa en la parte superior izquierda para seleccionar diferentes archivos en el ejemplo). Estoy iniciando sesión en la consola cada vez que se llama a render. He declarado User como PureComponent. Por lo tanto, el usuario solo debe volver a renderizar cuando cambien los accesorios o el estado. Pero cuando hace clic en eliminar para un usuario, tenga en cuenta que se llama a renderizar para todas las instancias de usuario .

He aquí por qué: el componente principal está transmitiendo una función de flecha en los accesorios. Las funciones de flecha se reasignan en cada render (la misma historia con el uso de bind). Entonces, aunque he declarado User.js como PureComponent, la función de flecha en el padre del Usuario hace que el componente de Usuario vea una nueva función enviada en los accesorios para todos los usuarios. Entonces, cada usuario vuelve a renderizar cuando se hace clic en cualquier botón de eliminación. ?

Resumen:

Evite las funciones de flecha y los enlaces en el renderizado. Rompe optimizaciones de rendimiento como shouldComponentUpdate y PureComponent.

¿Qué debo hacer en su lugar?

Por el contrario, aquí hay un ejemplo que no usa una función de flecha en el render.

En este ejemplo, index.js no tiene una función de flecha en el render. En cambio, los datos relevantes se transmiten a User.js. En User.js, onDeleteClick llama a la función onClick pasada a los accesorios con el user.id relevante.

Con este cambio, cuando haga clic en eliminar, observe que no se solicita el procesamiento para los otros usuarios. ?

Resumen

Para un rendimiento óptimo,

  1. Evite las funciones de flecha y enlace en render.
  2. ¿Cómo? Extraiga componentes secundarios o pase datos en el elemento HTML.

¿Busca más información sobre React? ⚛️

Soy autor de varios cursos de React y JavaScript en Pluralsight (prueba gratuita). ¡Mi último, "Creación de componentes React reutilizables" se acaba de publicar! ?

Cory House es autor de varios cursos sobre JavaScript, React, código limpio, .NET y más sobre Pluralsight. Es consultor principal en reactjsconsulting.com, arquitecto de software en VinSolutions, MVP de Microsoft, y capacita a los desarrolladores de software a nivel internacional en prácticas de software como desarrollo de front-end y codificación limpia. Cory tuitea sobre JavaScript y desarrollo front-end en Twitter como @housecor.