Angular TrackBy Optimization

Angular में trackBy optimization का उपयोग *ngFor के साथ lists render करते समय performance improve करने के लिए किया जाता है। जब list frequently update होती है, तब trackBy Angular को यह समझने में मदद करता है कि कौन-सा item वही है और कौन-सा नया है।

इस chapter में आप सीखेंगे:

• trackBy क्या है और इसकी ज़रूरत क्यों पड़ती है
• Default ngFor behavior क्या होता है
• trackBy function कैसे काम करता है
• Real-world examples
• Performance best practices

ngFor का Default Behavior

जब आप *ngFor बिना trackBy के use करते हैं, Angular array reference के आधार पर DOM update करता है।

अगर array में कोई change होता है, तो Angular:

• पूरे list के DOM elements को destroy करता है
• फिर से नए DOM elements create करता है

यह behavior small lists के लिए ठीक है, लेकिन large या frequently changing lists में performance issue बन सकता है।

trackBy क्या करता है

trackBy Angular को बताता है कि:

• हर item की unique identity क्या है
• अगर identity same है, तो DOM element को reuse किया जाए

इससे unnecessary DOM recreation avoid होता है।

Basic trackBy Syntax

<li *ngFor="let item of items; trackBy: trackByFn">
  {{ item.name }}
</li>

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

Simple Example Without trackBy

export class AppComponent {
  users = [
    { id: 1, name: 'Rahul' },
    { id: 2, name: 'Amit' }
  ];

  addUser() {
    this.users = [
      { id: 1, name: 'Rahul' },
      { id: 2, name: 'Amit' },
      { id: 3, name: 'Neha' }
    ];
  }
}

<li *ngFor="let user of users">
  {{ user.name }}
</li>

Explanation

• New array assign होते ही Angular पूरी list को नया मान लेता है
• Existing DOM elements भी destroy होकर फिर से बनते हैं
• Performance unnecessary रूप से degrade होती है

Same Example With trackBy

export class AppComponent {
  users = [
    { id: 1, name: 'Rahul' },
    { id: 2, name: 'Amit' }
  ];

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

  addUser() {
    this.users = [
      { id: 1, name: 'Rahul' },
      { id: 2, name: 'Amit' },
      { id: 3, name: 'Neha' }
    ];
  }
}

<li *ngFor="let user of users; trackBy: trackById">
  {{ user.name }}
</li>

Explanation

• Angular id के आधार पर items को पहचानता है
• Existing users के DOM elements reuse होते हैं
• सिर्फ नया user DOM में add होता है
• Rendering fast और efficient हो जाती है

trackBy With Index (Not Recommended)

trackByIndex(index: number) {
  return index;
}

<li *ngFor="let user of users; trackBy: trackByIndex">
  {{ user.name }}
</li>

Explanation

• Index change होते ही Angular items को अलग मान सकता है
• Insert या remove operations में गलत reuse हो सकता है
• इसलिए unique id based trackBy ज्यादा safe होता है

When You Should Use trackBy

• Large lists
• Lists with frequent add/remove/update
• API driven data
• Tables, dashboards, admin panels

When trackBy Is Optional

• Very small static lists
• Lists that never change

Common Mistakes

• trackBy में non-unique value return करना
• Random value या Math.random() use करना
• Index को blindly use करना

Best Practices

• हमेशा unique identifier return करें (id, uuid, code)
• Function simple रखें
• Large lists में trackBy को mandatory मानें
• Performance issues debug करते समय trackBy check करें

Summary

इस chapter में आपने सीखा:

• ngFor का default rendering behavior
• trackBy क्या है और क्यों ज़रूरी है
• trackBy function कैसे लिखा जाता है
• Performance optimization के real examples
• Best practices और common mistakes