Como mejorar el redimiendo de *ngFor con trackBy

En un principio mi intención era hablar sobre la directiva ngFor*, mientras me documentaba y revisaba apuntes, recordé  trackBy. 

¿Por qué nos olvidamos de trackBy? 

La verdad que no lo sé, pero todo lo que pueda ayudar mejorar el perfomance de mi aplicación es bienvenido. 

• 

En este post vamos a hablar sobe trackBy, como nos puede ayudar a mejorar el rendimiento. 

*ngFor 

La directiva ngFor es comúnmente usada para iterar sobre un array. 

ngFor export algunas variables locales que podemos utilizar durante la iteración actual: 

• index: iteración de bucle actual para cada contexto del template.
• first: valor booleano que indica si el elemento es el primero en la iteración.
• last: valor booleano que indica si el elemento es el último en la iteración.
• even: valor que indica si este elemento tiene un índice par.
• odd: valor booleano que indica si este elemento tiene un índice impar.

<li *ngFor="let item of items;let i=index">{{i}} - {{item.name}}</li>

En este ejemplo la directiva recorrería todo el array de items. 
Y se renderiza el contenido de item. 

Angular convertirá este código en lo siguiente.

<ng-template ngFor let-item [ngForOf]="items" let-i="index">
  <div>({{i}}) {{item.name}}</div>
</ng-template>

Hasta aquí todo bien, ningún problema a la vista. 

Pero internamente cada vez se añada, modifiques o elimines un item del array, Angular a través de la directiva *ngFor volverá a redibujar completemente el DOM desde cero. Y esto es una operación costosa. 

En aplicaciones medianas o grandes esto puede llegar a ser un problema. 

Debería existir algo capaz de encargarse de realizar un seguimiento de los cambios en el array por lo tanto en el los elementos y que solo hiciera los cambios o el cambio en los items necesarios. 

• 

Y sí, existe y es trackBy. 

Vamos a mejorar nuestro ejemplo anterior. 

<li *ngFor="let item of items;let i=index;trackBy: trackByItems">
{{i}} - {{item.name}}
</li>

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByItems”>
<div>({{i}}) {{item.name}}</div>
</ng-template>

en nuestro .ts

trackByItems(index: number, item: any): number { return item.id; }

trackBy

Es una función que define cómo realizar un seguimiento de los cambios para los elementos en el iterable.

Ahora cada vez que se agregue, mueva o elimine elementos en el array,  

Cuando se agregan, mueven o eliminan elementos en el iterable, la directiva, sólo volverá a redibujar los items que han cambiado. 

Cuando se proporciona esta función, la directiva utiliza el resultado de llamar a esta función para identificar el nodo del elemento, en lugar de la identidad del objeto en sí.

La función recibe dos entradas, el índice de iteración y el ID del objeto del nodo (item).

Pues esto es todo por este post!
Si te ha gustado recuerdo compartirlo. 

Hasta la próxima.