UI flicker when array is changed angular 11

Question

I am contacting an array on value updated by the server, but the UI template flicker on concat.. what should be done to avoid such a situation.

   @Input('companies')   set setCompanyArray(companies) {
     this.showNotFound = false;> 
     if (!companies) {
       return;
     }
     companies.map((company) => {
       company['searchFilter'] = this.lastSearchedText;
    });
    if (!this.companies) {
       this.companies = companies;
       return;
     }
     this.companies = this.companies.concat(companies);

Answer 1

Each time you assign a new value to companies variable, you will see flickering because Angular is rendering the whole list again. You should add trackByFn to tell Angular whether to rerender the whole list or just new items.

 <li *ngFor="let company of companies;trackBy: trackByFn"></li>

  trackByFn(index, company: Company) {

    return company.id // or whatever is an unique identificator for a company
  }