Come migliorare le performance in Angular con trackBy
Per migliorare le prestazioni della tua applicazione Angular quando usi degli elenchi di elementi che vengono aggiornati, esiste una potente alleata: la funzione trackBy.
Cos’è trackBy
In Angular, la funzionalità trackBy è uno strumento potente utilizzato insieme alla direttiva *ngFor per ottimizzare le prestazioni di rendering quando si visualizzano elenchi di elementi.
Per impostazione predefinita, Angular renderizza ogni volta l’intero elenco quando ci sono modifiche, il che può portare a problemi di prestazioni, specialmente se lavoriamo con grandi set di dati. La funzione trackBy consente a chi sviluppa di specificare un ID unico per ciascun elemento nell’elenco, consentendo ad Angular di tenere traccia e aggiornare solo gli elementi necessari nel DOM, potendo contare su un elemento che li differenzia.
Utilizzando trackBy infatti, si minimizza il numero di operazioni sul DOM richieste durante l’aggiornamento dell’elenco, portando a esperienze utente più fluide e tempi di rendering più rapidi.
Quando è stato introdotto
La funzionalità trackBy fa parte di Angular fin dalla versione 2.0, rilasciata nel settembre 2016. È stata introdotta per migliorare le prestazioni delle applicazioni riducendo al minimo le manipolazioni non necessarie del DOM quando gli elementi in un elenco cambiano.
Esempio di utilizzo
Di seguito riportiamo un semplice esempio che dimostra come utilizzare trackBy con un array di elementi in un componente Angular. All’interno del componente, definiamo una lista di oggetti con i relativi ID e poi aggiungiamo una funzione per restituire l’ID dell’elemento (ossia trackByItemId) e una funzione che aggiunge un elemento alla lista.
Nota: questo esempio non segue le best practice di single-responsibility, ma serve a rendere chiaro il funzionamento di trackBy. Per saperne di più sulle best practice per scrivere un’applicazione in Angular, dai un’occhiata a questo post.
// item-list.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-item-list',
templateUrl: './item-list.component.html',
})
export class ItemListComponent {
items = [
{ id: 1, name: 'Elemento 1' },
{ id: 2, name: 'Elemento 2' },
{ id: 3, name: 'Elemento 3' },
];
trackByItemId(index: number, item: any): number {
return item.id;
}
addItem() {
const newItemId = this.items.length + 1;
this.items.push({ id: newItemId, name: `Elemento ${newItemId}` });
}
}
Nel codice del template, andiamo a utilizzare la direttiva *ngFor per iterare la lista di elementi e usiamo trackBy a supporto: quando la lista verrà modificata con l’aggiunta o la rimozione di un elemento, Angular andrà ad aggiornare quel solo elemento.
<ul>
<li *ngFor="let item of items; trackBy: trackByItemId">
{{ item.name }}
</li>
</ul>
<button (click)="addItem()">Aggiungi Elemento</button>
La funzionalità trackBy in Angular è essenziale per ottimizzare le prestazioni durante il rendering degli elenchi con *ngFor. Fornendo un modo per identificare univocamente gli elementi, riduce le ri-renderizzazioni non necessarie e mantiene efficacemente gli stati dei componenti. Implementare questa funzionalità può migliorare significativamente la reattività e l’efficienza delle tue applicazioni Angular!
