[Solved] Given the component code below, what will be logged when the items array is updated by adding a new item?items = [{id: 1, name: 'A'}, {id: 2, name: 'B'}]; trackByFn(index: number, item:... | Angular

Angular - Performance Optimization

Given the component code below, what will be logged when the items array is updated by adding a new item?

items = [{id: 1, name: 'A'}, {id: 2, name: 'B'}];

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

Template:

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

ARendering throws an error due to trackBy function

BAll items are re-rendered and logged

CNo items are rendered

DOnly the new item is rendered and logged

Step-by-Step Solution

Solution:

Step 1: Understand how trackBy works with unique IDs
The trackByFn returns the unique id of each item, so Angular can track items by their IDs.
Step 2: Effect of adding a new item
When a new item is added, Angular uses trackByFn to detect only the new item and renders just that one, not the entire list.
Final Answer:
Only the new item is rendered and logged -> Option D
Quick Check:
trackBy with unique ID renders only changed items [OK]

Quick Trick: trackBy returns unique id to render only changed items [OK]

Common Mistakes:

Master "Performance Optimization" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given the component code below, what will be logged when the items array is updated by adding a new item?