Why are all my components re-rendering when I update the database?

I was trying to update a value in Firebase RTDB and realized that when I do so, all components connected to that Observable gets reloaded, why is that ?

TS

import { Component, OnChanges, OnInit, SimpleChanges, Inject } from '@angular/core';

import { AngularFireDatabase } from '@angular/fire/compat/database';
import { BehaviorSubject, Observable, switchMap } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

  
})
export class AppComponent  {
squad = new Array;

timeline$: Observable<any[]>;
lineup$: Observable<any[]>;

  x$ = new BehaviorSubject<string>('first_race');
  
  constructor(private db: AngularFireDatabase) {

    // Get Lineups
    this.lineup$ = this.x$.pipe(switchMap((x) => {
      return this.db.list('lineups/'+x).valueChanges();
  }))


    // Get Timeline
      this.timeline$ = this.x$.pipe(switchMap((x$) => {
          return this.db.list(x$).valueChanges();
      }))




  }
  
  match_no(b: string) {
      this.x$.next(b);
  }

  changer(){
    this.lineup$.subscribe({next:(value: any[]) => this.squad.push(value[0])});
    console.log(this.squad[0])
  }

}

HTML

<div *ngFor="let lines of lineup$ | async">

<ng-container *ngIf="lines.lineups != undefined">
<button type="button" (click)='match_no("first_race")' (click)='changer()'>Game 1</button>


<div *ngFor="let tl of lineup$ | async">
<p *ngFor="let starting_lineup of tl.lineups[0].starting_lineup">{{ starting_lineup.name}}</p>
</div>
</ng-container>
</div>

The data looks like this

JSON

"lineups":{
"first_race":[
    {
    "lineups":[{
        "starting_lineup":[
                {
                "name": "Racer 1",
                "position": "1",
                "car": "fast_bigwheel_car"
                },
                {
                "name": "Racer 3",
                "position": "2",
                "car": "fast_flying_car"
                },
                {
                "name": "Racer 2",
                "position": "3",
                "car": "fast_small_car"
                }
        ]

    }]

}]

}

If I am to go to Racer 2 and change "car" from "fast_small_car" to something else then the whole app refreshes. I figured it could have something to do with
<ng-container *ngIf="lines.lineups != undefined"> but i need that since sometimes that comeback blank and then the app won’t render properly.

Help here !!!

>Solution :

Try using trackBy so that *ngFor knows which elements to refresh and not refresh, this might solve your issue!

<div *ngFor="let lines of lineup$ | async; trackBy: trackByIndex">

    <ng-container *ngIf="lines.lineups != undefined">
    <button type="button" (click)='match_no("first_race")' (click)='changer()'>Game 1</button>


    <div *ngFor="let tl of lineup$ | async; trackBy: trackByIndex">
         <p *ngFor="let starting_lineup of tl.lineups[0].starting_lineup; trackBy: trackById">{{ starting_lineup.name}}</p>
    </div>
    </ng-container>
</div>

The functions will be

trackByIndex(index: number) {
    return index;
}

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