Mejorar el rendimiento de *ngFor con trackBy
Tags: angular, ngfor, trackby, rendimientoangular
Published: 2020-05-16 11:51:52

---
title: Mejorar el rendimiento de *ngFor con trackBy
published: true
description: Mejorar el rendimiento de *ngFor con trackBy
tags: angular, ngFor, trackBy, rendimiento angular, 
---

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. 

![ngFor angular](https://media.giphy.com/media/3o7aTLkyh3yAG6DEuQ/giphy.gif)
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 exporta 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.

![ngFor angular](https://dev-to-uploads.s3.amazonaws.com/i/p75jj2oil3coy8ldzlyx.png)

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. 

![ngFor angular](https://dev-to-uploads.s3.amazonaws.com/i/k7n9id1463dbn9o4qqty.png)

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. 
![ngFor angular](https://media.giphy.com/media/LMhbdKMCkxtP4hXLxJ/giphy.gif)

Y sí, existe y es trackBy. 

Vamos a mejorar nuestro ejemplo anterior. 

![performance](https://dev-to-uploads.s3.amazonaws.com/i/qavizw2i7fguklwlczye.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n5naoyyp8aavj0ng1xa3.png)

**En nuestro .ts**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p9mzsr7kpq1zu9zmgrkp.png)

###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