How does rendering behave when a list item changes? Why is trackBy needed?

When an element in a list is changed in most frameworks (for example, Angular), the entire list or its part is re-rendered. Without optimizations, this can lead to re-drawing all elements, even if only one has changed.

trackBy is a function that helps the framework identify list elements by a unique key (for example, id). This way, when data changes, the framework knows which elements have changed, which have been added or removed, and updates only those, not the entire list. This significantly improves performance and reduces unnecessary DOM operations.

Example in Angular:

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

And in the template:

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