I am currently working with a PrimeNg dropdown that is fetching its options through a function call. However, I have noticed that this function is being called an excessive number of times. Could this potentially impact the performance or any other aspect? If so, are there any solutions to address this issue?
HTML:
<tabset>
<tab *ngFor="let item of countries" [heading]="item.country">
<div class="mb-5 col-md-6">
<label for="state" class="col-lg-12 form-label">State</label>
<p-dropdown [options]="getStates(item.countryId)" name="stateId" placeholder="Select State" optionLabel="name" optionValue="id" [showClear]="true"> </p-dropdown>
</div>
</tab>
</tabset>
TS:
getStates(countryId: number): StateDto[] {
console.log('fetching states');
return this.stateMap.filter(x => x.countryId == countryId)[0]?.states;
}