> [example][1]
The `trackByFn` function will be called every time Angular runs `change detection` for the component (more precisely for the embedded view created by ngFor). This is because updating DOM is part of change detection and Angular needs to call `trackByFn` to know what value to use for DOM update. And change detection cycle can run quite often. So if you have 3 items in the list and CD is triggered 3 times initially, you will see that the function is called 9 times.

you can change the components `changeDetectionStrategy` to **onPush**. after that, your **trackByFn** function does not call several times.
to do that :
in your component:
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], changeDetection: ChangeDetectionStrategy.OnPush // this line })
export class AppComponent {
....
trackByFn(value) { } }



[1]: https://stackblitz.com/edit/angular-uazy9v?file=src/app/list/list.component.ts

I would recommend you to render the list in parts or only the visible captions. If this is not solution for you try to set change detection to `ChangeDetectionStrategy.OnPush` and set the click event on the parent element of the list, to avoid having thousand event clicks (for each row). If your translations have ID's track by it `trackBy: trackByFn`
trackByFn(index, item) { return item.id }
When you set changedetection `OnPush` you have to have always new instance of the array you provide to `*ngFor`, for ex:
let captions = [{id: 1, name: '1 caption'}]; // instead of captions.push({id: 2, name: 'new caption'}); // you have to do captions = caption.concat({id: 1, name: 'new caption'});
or if you have object, avoid mutating it, because `OnPush` works by comparing references of the inputs of the component. While you did not provide a reference to a new object/array but instead mutated an existing one, the `OnPush` change detector did not get triggered.