Friday, December 7, 2018

trackBy in an *ngFor

Imagine...

<div *ngFor="let mouse of mice; let i=index; trackBy: myFunction">

 
 

...or even...

<div [ngForOf]="mice" let-i=index [ngForTrackBy]="myFunction">

 
 

Alright, the trackBy references a function in the component that will be used to assign a unique identifier to a given mouse instead of justing using the pointer for the mouse for as much. The problem with the pointer occurs in the Redux pattern wherein when you "save" something back to the store you actually destroy it and recreate it so as not to mutate state. If you are using the pointer as a key in an *ngFor list listening back to the store, the list could flicker or resort upon the shake up.

No comments:

Post a Comment