¿Por qué todos mis componentes se vuelven a representar cuando actualizo la base de datos?

Estaba intentando actualizar un valor en Firebase RTDB y me di cuenta de que cuando lo hago, todos los componentes conectados a ese Observable se recargan, ¿por qué?

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>

Los datos se ven así

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"
                }
        ]

    }]

}]

}

Si voy a Racer 2 y cambio "car" de "fast_small_car" a otra cosa, toda la aplicación se actualiza. Pensé que podría tener algo que ver, <ng-container *ngIf="lines.lineups != undefined">pero lo necesito ya que a veces ese mensaje aparece en blanco y luego la aplicación no se procesa correctamente.

¡¡¡Ayuda aquí!!!

Jan 01 '70 08:01 almostasnecessary