What You’ll Learn
Why ng-repeat can slow down performance
How track by improves efficiency
Best practices for using track by
1️⃣ Understanding ng-repeat Performance Issues
AngularJS uses ng-repeat to loop through lists and render items dynamically. However, without optimization, it can cause performance issues in large datasets.
The Problem: AngularJS’s Default Tracking Mechanism
By default, ng-repeat tracks elements based on object references.
<li ng-repeat="item in items">{{ item.name }}</li>
Issue: If the array updates, AngularJS removes and re-creates all DOM elements, even if only one item changes!
2️⃣ How track by Fixes This Issue
Adding track by in ng-repeat tells AngularJS how to uniquely identify each item, preventing unnecessary DOM re-renders.
Correct Usage: track by item.id
<li ng-repeat="item in items track by item.id">{{ item.name }}</li>
Now AngularJS reuses existing elements instead of deleting and recreating them.
3️⃣ Benefits of Using track by
🔹 Prevents unnecessary DOM manipulation (better performance)
🔹 Speeds up rendering in large lists
🔹 Avoids flickering and unnecessary animations
🔹 Reduces memory usage
4️⃣ Best Practices for track by
1. Always Use a Unique Identifier (e.g., id)
A unique key (like id) helps AngularJS track changes efficiently.
<li ng-repeat="user in users track by user.id">{{ user.name }}</li>
Ensure each item has a unique id to prevent errors.
2. Avoid Using $index for Tracking
Using $index can cause issues when items are added, removed, or reordered.
<li ng-repeat="item in items track by $index">{{ item.name }}</li>
Issue: $index changes when the list updates, leading to unnecessary DOM updates.
Better: Use track by item.id.
3. Use track by with Filtered or Sorted Lists
When using filters (filter or orderBy), always include track by to prevent performance issues.
<li ng-repeat="user in users | filter:search track by user.id">{{ user.name }}</li>
Prevents unnecessary re-renders when filtering.
4. Avoid track by When Data Lacks Unique Identifiers
If items don’t have unique keys, track by may cause errors. Ensure objects have unique properties.
Bad Example (No Unique ID):
<li ng-repeat="user in users track by user">{{ user.name }}</li>
Fix: Add a unique identifier.
5️⃣ Example: Performance Comparison
Without track by (Poor Performance)
<ul>
<li ng-repeat="user in users">{{ user.name }}</li>
</ul>
Every change in users triggers full DOM re-rendering.
With track by (Optimized Performance)
<ul>
<li ng-repeat="user in users track by user.id">{{ user.name }}</li>
</ul>
Only modified items update, improving performance significantly.