Using trackBy is a typical solution to improve the performance of your Angular application.

This article does not cover how trackBy works, as there is already sufficient information available on this topic.

How does ChatGBT explain this?

Problem

Typically, when using trackBy in Angular, it is necessary to create a function that generates a unique value for each item. This method should be implemented in every component where trackBy is utilized.

Let’s suppose we have a couple of components that need to render a list of items.

@Component({
  selector: 'app-cats',
  template: `
    <ul> 
      <li *ngFor="let item of items; trackBy: trackById">
    </ul>
  `,
  styleUrls: ['./cats.component.scss'],
})
export class CatsComponent {
  @Input() items: {id: number; name: string}[];

 trackById(index, item): number {
     return item.id; 
  }
}

@Component({
  selector: 'app-dogs',
  template: `
    <ul> 
      <li *ngFor="let item of items; trackBy: trackByIndex">
    </ul>
  `,
  styleUrls: ['./dogs.component.scss'],
})
export class DogsComponent {
  @Input() items: string[];

 trackByIndex(index, item): number {
     return item.index; 
  }
}

As we can observe, there is a significant amount of boilerplate code that can be minimized.

Solution

To avoid code duplication and enhance the usability of trackBy, we employ a helpful technique known as PerformanceUtils.

export class PerformanceUtils {
  static trackById(_index: number, item: any): string {
    return item.id;
  }

  static trackByIndex(index: number): number {
    return index;
  }
}

Subsequently, the PerformanceUtils can be declared as a class property and utilized directly within the template.

@Component({
  selector: 'app-cats',
  template: `
    <ul> 
      <li *ngFor="let item of items; trackBy: PerformanceUtils.trackById">
    </ul>
  `,
  styleUrls: ['./cats.component.scss'],
})
export class CatsComponent {
  @Input() items: {id: number; name: string}[];

  PerformanceUtils: typeof PerformanceUtils = PerformanceUtils;
}

@Component({
  selector: 'app-dogs',
  template: `
    <ul> 
      <li *ngFor="let item of items; trackBy: PerformanceUtils.trackByIndex">
    </ul>
  `,
  styleUrls: ['./dogs.component.scss'],
})
export class DogsComponent {
  @Input() items: string[];

  PerformanceUtils: typeof PerformanceUtils = PerformanceUtils;
}

As we can see we have a lot of boilerplate code, which can be reduced, and now is very easy to integrate trackBy in every *ngFor of your application has become effortless by simply declaring one additional property.

Connect with us on social media:
🙉 Visit us on our website: AngularMagic.com
🙈 Follow us on LinkedIn: LinkedIn
🙊 Follow us on Telegram: Join link

🤌 Stay updated with our latest news, articles, and updates by following us on these platforms. We appreciate your support!

Angular’s trackBy —  easier than ever was originally published in Angular Magic on Medium, where people are continuing the conversation by highlighting and responding to this story.