Melhore a performance da sua aplicação com Change Detection Strategy OnPush
Olá Pessoal, tudo bem?
Neste artigo vamos falar sobre Change Detection Strategy OnPush, um mecanismo muito poderoso para ajudar na performance da nossa aplicação Angular.
Detecção de Mudança
Por padrão no Angular, os componentes possuem ChangeDetectionStragy.Default, que fazem detecção de mudanças quando alguma chamada assíncrona (promises, ajax, timers) é retornada, valores do @Input forem alterados e @Outputs disparados (checkalways).
Porém, em alguma aplicação em grande escala pode haver um problema de performance, pois será verificado em toda a árvore de componentes se os valores foram alterados. Se tiverem sido alterados, a View é atualizada. Podemos perceber que nossos componentes ficam em um contexto global de detecção de mudança, pois caso um componente seja alterado e a detecção seja disparada, outros componentes da árvore também serão executados, podendo ser bem custoso.
Change Detection Strategy OnPush
Na definição do componente, temos a possibilidade de informar a estratégia de change detection que queremos adotar no componente a ser criado.
Temos a possibilidade de informar a estrategia OnPush, onde será desabilitada a detecção de mudança frequente, pois o componente passará a realizar a detecção apenas quando receber novos valores via (Input) ou algum evento disparado (Output), tornando isolado, sem dependência de outros componentes como deve ser. Veja o código abaixo com exemplo de configuração:
Esta estratégia pode ser usada perfeitamente em dumbs componentes, que são componente simples, geralmente sem requisições assíncronas, que recebem os valores e repassam diretamente para a view.
Ao utilizar OnPush em componentes que realizam requisições assíncronas, se houver no seu retorno atualização de alguma propriedade que contém na view, precisaremos informar o Angular que queremos fazer a detecção. Veja abaixo como:
Se não dispararmos manualmente a detecção de mudança, a view não será atualizada.
Conclusão
Neste artigo pudemos perceber a importância da estrategia OnPush nos componentes e como podemos melhorar a performance da nossa aplicação, deixando claro para o Angular quando queremos que ele faça a detecção em nossos componentes.
Espero que estas informações ajudem de certa forma, a fim de construirmos aplicações mais performáticas e utilizarmos o poder do Angular!
Obrigado e até a próxima! 👊
