# Pourquoi c'est important d'utiliser la fonction trackBy dans un *ngFor en Angular ?

Dans nos applications Angular, nous sommes parfois amenés à afficher des listes d'élements sur nos interfaces utilisateur. Pour pouvoir réaliser cette opération, nous itérons sur des tableaux d'élements simples ou d'objets en utilisant la directive `*ngFor`.  
De façon basique, voici un exemple de comment procédons-nous généralement :

```xml
<ul *ngFor="let item of items">
    <li> {{ item.name }} </li>
</ul>
```

* `items` ***est un tableau d'objets qui contient la propriété*** `name` ***comme un attribut de chacun de ces objets.***
    

Supposons à présent que nous ayons une très grande liste d'éléments à afficher et qu'après affichage, nous faisons des traitements sur quelques éléments de cette liste.

> ***Lorsque nous inspectons notre page web en utilisant le navigateur*** `Google Chrome` ***par exemple, une fois dans le menu*** `Rendering` ***puis l'option*** `Paint Flashing`***, nous remarquons que tous les éléments de notre liste sont mis à jour à chaque fois, même ceux qui n'ont pas subi de modifications.*** ***Résultat, nous aurons des soucis de performance.***

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683586860342/73cfc2ea-1198-44a1-8bb5-4382961bf9d0.png align="center")

> Heureusement pour nous, la core team de Angular y avait déjà pensé !  
> La solution est très simple. Il s'agit de la fonction `trackBy`😁

En effet, la fonction `trackBy` nous permet d'identifier chaque élément de façon unique dans notre ***DOM***. Ainsi, lorsque nous modifions des éléments de notre liste, seuls ces éléments sont mis à jour et toute notre liste ne subit plus de rafraîchissement.  
Voici un exemple de comment procéder en reprenant l'exemple précédent :

```xml
<ul *ngFor="let item of items; trackBy: itemTrackBy" >
    <li> {{ item.name }} </li>
</ul>
```

```typescript
export class ItemComponent {
 ...   
    public itemTrackBy(index: number, item: Item) {
      return item.id;
    }
}
```

En somme, nous comprenons à présent pourquoi il est crucial de faire gaffe lorsque nous manipulons des boucles `*ngFor` dans nos applications Angular. C'est tout à notre avantage de permettre au ***DOM*** de pouvoir identifier de façon unique chaque élément de nos listes car nous gagnerons nettement en performance en cas de besoin.

> Pour plus d'informations 👉 [TrackBy Function](https://angular.io/api/core/TrackByFunction)