Mejorar el rendimiento con la función 'trackBy' en 'ngFor'

El propósito de la función trackBy en la directiva ngFor es, específicamente, mejorar el rendimiento rastreando la identidad del objeto. En Angular, la directiva *ngFor es uno de los elementos esenciales que se utiliza comúnmente para iterar a través de una lista de elementos y producir una plantilla para cada uno. Sin embargo, sin el soporte de trackBy, puede haber problemas de rendimiento.

¿Cómo funciona 'trackBy'?

Cuando se usan listas que cambian en Angular, como puede ser común en aplicaciones de una sola página, ngFor puede tener dificultades para saber qué elementos son nuevos, cuáles han cambiado y cuáles no. En su estado 'vanilla', sin la función trackBy, cada vez que se produce un cambio en la lista, Angular tiene que destruir todo el DOM de la lista y recrearlo.

Esto es donde trackBy entra en la situación. Esta función permite a Angular rastrear la identidad de cada elemento, lo que significa que si un elemento existente en la lista cambia posición, Angular es consciente de ello y reorganiza las plantillas generadas para esa lista sin eliminar y recrear toda la estructura DOM.

Por lo tanto, en lugar de recrear innecesariamente elementos del DOM, puede realizar un seguimiento de los elementos que ha visto antes y reutilizar esos elementos en lugar de reconstruirlos desde cero. Como resultado, la aplicación se vuelve mucho más rápida y eficiente.

Ejemplo práctico

Aquí presentamos un ejemplo de cómo se usará trackBy con ngFor en un componente Angular:

@Component({
selector: 'mi-app',
template: `
  <div *ngFor="let item of items; trackBy: trackByFn">{{item.id}} - {{item.name}}</div>
`
})
class MiAppComponent {
items = [{id: 1, name: 'item1'}, {id: 2, name: 'item2'}, {id: 3, name: 'item3'}];

trackByFn(index, item) {
    return item.id; // unique id corresponding to the item
  }
}

Como se ve en el código, trackBy se proporciona una función (trackByFn en este caso) que se utiliza para obtener un identificador único para cada elemento.

Conclusión

En resumen, el uso de ngFor sin trackBy en una lista de elementos que cambian puede ralentizar el rendimiento de su aplicación ya que Angular tiene que recrear todo el DOM para esa lista cada vez. Utilizando trackBy, mejora la eficiencia y el rendimiento de su aplicación permitiendo a Angular reorganizar las plantillas sin tener que reconstruir todo el DOM cada vez que cambia la lista.