👀 Views: 40 💬 Answers: 1 📅 Created: 2025-06-12

angular ngFor trackBy performance typescript

I keep running into I recently switched to This might be a silly question, but I've been working on an Angular 15 application where I'm rendering a list of user objects using `*ngFor` along with a `trackBy` function for performance optimization. However, I noticed that the list is not updating correctly when the objects in the array are modified, even though the reference of the array remains the same. Here’s a simplified version of my code: ```typescript import { Component } from '@angular/core'; interface User { id: number; name: string; } @Component({ selector: 'app-user-list', template: ` <ul> <li *ngFor="let user of users; trackBy: trackById"> {{ user.name }} </li> </ul> <button (click)="updateUser()">Update First User</button> ` }) export class UserListComponent { users: User[] = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]; trackById(index: number, user: User): number { return user.id; } updateUser() { // Only changing the name property without changing the reference this.users[0].name = 'Alice Updated'; } } ``` When I click the button to update the first user's name, I expect the change to reflect in the UI, but it does not. The trackBy function seems to prevent Angular from detecting the change since the object reference is still the same. I tried to create a new object instead of mutating the existing one: ```typescript updateUser() { this.users[0] = { ...this.users[0], name: 'Alice Updated' }; // New object created } ``` This change worked as expected, and the UI updated properly. However, I want to understand why the initial approach didn't work. Is there a best practice when using `trackBy` with mutable objects? Should I always create a new object to ensure Angular detects changes, or are there scenarios where mutating the object is acceptable? Any insights or recommendations would be greatly appreciated! For context: I'm using Typescript on macOS. How would you solve this? Any feedback is welcome! Any pointers in the right direction?