Angular ngFor loop trackBy Function

Question

I am trying to understand trackBy in angular ngFor but I am not able to find any difference whether I use it or not. Below is my code

.ts

export class AppComponent  {
  users = [
    {id: 1, name: 'Test User 1', role: 'ADMIN'},
    {id: 2, name: 'Test User 2', role: 'DEV'},
    {id: 3, name: 'Test User 3', role: 'DEV'},
  ]

  add(){
    const id = this.users.length+1
    let user = {
      id: id,
      name : `Test User ${id}`,
      role: 'Dev'
    }
    // this.users.push(user)
    this.users = [...this.users , user]
  }

  delete(i){
    this.users.splice(i,1)
  }

  fnc(index, user){
      return index
  }
}

.html

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Role</th>
        <th>Action</th>
    </tr>
    <tbody>
        <tr *ngFor="let user of users;let i = index;trackBy:fnc">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.role}}</td>
            <td>
                <button (click)="add()">Add</button>
                <button (click)="delete(i)">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

Working link https://stackblitz.com/edit/angular-ivy-3gnjr2

I am checking in developer tools inside the inspect tab. If I use trackBy or not whenever I add an Item or delete icon nodes are being rendered in same way

Answer 1

trackBy used to optimize performance of rendering after array update. With trackBy Angular understands which nodes it can reuse, which should be deleted/created. Also: track by which returns index is useless (trackBy should return uniq id of your array item).

There is good article about trackBy : https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

Answer 2

TrackBy is mainly used to get better performance.

It is not a 100% clear from your question what you expect to happen, but the trackBy function will not have any effect on what the final DOM looks like. If you are using trackBy, it will make sure that DOM elements that have not changed will not be destroyed and rebuilt. No point in rerendering DOM elements that is based on data that haven't changes.

Answer 3

I would like to add something. You can view the difference by looking into Elements tab of Developer tools.

For Ex: In Chrome

Right Click on your list => Select Inspect => View as values of list are rendered

When your list items are changed, only changed list item will be updated if you use unique id in trackBy function, which effectively increases the rendering of list which is updated frequently. If this unique Id matches the previous one, then Angular will not detect the change and particular list item will not be re-rendered . Even when change detection is called frequently, list rendering process is optimized by using trackBy.

Refer this answer for more information.