Fewer computations -> performance gain! 🥳
As we all know, in terms of performance, DOM manipulations are rather expensive than regular JavaScript code.
Angular’s ngFor Directive is highly optimized in a way that reduces DOM
manipulation to a bare minimum. So, if an element is added or removed from an
array, the whole list isn’t getting re-rendered. Whereas it’d use all the
existing DOM elements and the only new element gets created or removed.\
Similarly, when the element changes its position in the array, only that change in position of DOM element get noticed.
Angular determines all the DOM manipulation and does all optimisation since it conducts identification of each object in the array. It uses the** reference of the object** for that.
Unfortunately, Angular's default method of identifying objects by its reference
is quite constrained especially in circumstances where a reference shift can’t
be prevented.
 
If we are working with REST API or any type of immutable data structure, the reference of each object will be kept on changing. This forces Angular to give up its default optimisations and forces it to re-render the whole data set. This is because every reference is modified and therefore every object seems new to Angular.
As you can probably tell this heavily impact the performance. Especially if your
collection is huge. To avoid this, we can help Angular to identify each object
in the collection by having a trackBy attribute. A trackBy attribute allows us
to define a function that returns a unique identifier for each iterable element.
This helps bypass unnecessary and expensive change detection when the data set
changes, say for example on receiving new data from an API call.
trackBy?We need to create a function within our component that matches TrackByFunction interface. The trackby function takes the index and the current element as arguments and it returns the unique identifier for this element.
interface TrackByFunction<T> {
  (index: number, item: T): any;
}
// component level function should look something like this
function trackByTransaction(index: number, item: Transaction): string {
  return item.id;
}
And use it in the template like this:
<div *ngFor="let item of txnList; trackBy: trackByData">
  <!-- do stuff -->
</div>Let me know what you think