Estou avaliando a melhor abordagem para renderizar algo no meu template a partir de uma condição, de forma que evite renderizações e chamadas de funções desnecessárias pra melhoria do desempenho da aplicação.
Percebi que se eu tenho uma função no meu template para verificar e retornar algo, sempre que há alguma ação na tela, essas funções são chamadas novamente. Exemplo:
<div *ngFor="let usuario of usuarios">
<h3> {{getUserRole (usuario.id)}} </h3>
</div>
E no meu TS:
getUserRole (id: number) {
if (id === 0) {
return 'Professor'
} else if (id === 1) {
return 'Estudante'
}
}
Sempre que eu executar uma ação em minha página, por exemplo, um clique em um botão, essa função será chamada, mesmo que desnecessariamente. Uma alternativa para evitar isso é usar pure pipes
.
Estou me perguntando se, quando eu uso a condição ternária no meu template, isso também ocorre, ou seja:
<div *ngFor="let usuario of usuarios">
<h3> {{usuario.id === 0? 'Professor': 'Estudo'}} </h3>
</div>
Se isso também ocorre, quando eu preciso usar pipes
? Em todos os casos que eu preciso renderizar algo sobre um condicional como nos exemplos acima ou apenas se minha condição for muito pesada (uma matriz com muitos objetos e propriedades)?