[Solved] You wrote this trackBy function but Angular is not updating the DOM efficiently. What is the error? trackByFn(index, item) { return index; } // items array is reordered but items have same content | Angular

Angular - Performance Optimization

You wrote this trackBy function but Angular is not updating the DOM efficiently. What is the error?

trackByFn(index, item) {
  return index;
}

// items array is reordered but items have same content

AtrackBy function must return item object, not index

BUsing index as key causes wrong DOM updates on reorder

CtrackBy function should not have parameters

DtrackBy function must return a boolean

Step-by-Step Solution

Solution:

Step 1: Analyze using index as trackBy key
Using index means Angular tracks items by their position, not identity.
Step 2: Effect on reordered list
If items reorder but content is same, Angular thinks items changed because indexes changed, causing inefficient DOM updates.
Final Answer:
Using index as key causes wrong DOM updates on reorder -> Option B
Quick Check:
trackBy should use unique id, not index for reorder [OK]

Quick Trick: Avoid index as trackBy key if list can reorder [OK]

Common Mistakes:

Master "Performance Optimization" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

You wrote this trackBy function but Angular is not updating the DOM efficiently. What is the error?