Por qué usar funciones de flecha o enlaces en JSX Props es un No-No

Al usar React, es importante evitar el uso de funciones de flecha o vinculante en accesorios JSX. Esta práctica puede provocar problemas de rendimiento y comportamiento incorrecto.

Problemas de rendimiento

El uso de funciones de flecha o enlaces dentro de accesorios JSX obliga a que estas funciones se recreen en cada renderizado. Esto significa que:

• La función anterior se descarta, lo que activa la recolección de basura.
• La representación continua de muchos elementos puede provocar fluctuaciones en el rendimiento.
• Componentes que dependen de PureComponents o debería ComponentUpdate aún activa la reproducción debido al cambio de la función de flecha.

Incorrecto Comportamiento

Considere el siguiente ejemplo:

onClick={() => this.handleDelete(tile)}

Este código creará una nueva función en cada renderizar, lo que hace que React marque el componente como sucio y active una nueva renderización. Incluso si el accesorio del mosaico no ha cambiado, el componente se volverá a representar porque la función de la flecha es diferente.

Prácticas recomendadas

Para evitar estos errores, utilice el siguientes mejores prácticas:

• Vincular el controlador de eventos en el constructor:

constructor(props) {
  super(props);
  this.handleDelete = this.handleDelete.bind(this);
}

• Crea una función de flecha fuera del método de renderizado:

const handleDelete = tile => {
  // Handle delete logic
};

Nota adicional:

Es importante tener en cuenta que las funciones de flecha están perfectamente bien cuando se usan en otras partes del componente, como dentro del método de renderizado. Sin embargo, se deben evitar al asignar controladores de eventos a accesorios JSX.