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 :

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

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 :

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

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