Melhorando o desempenho do aplicativo React evitando atualizações desnecessárias

Um dos problemas mais comuns que afeta o desempenho de aplicações React são ciclos de renderização desnecessários. Os Componentes React serão renderizados novamente sempre que seus pais atualizarem automaticamente, mesmo quando seus objetos não forem alterados. Esse comportamento padrão pode ser manipulado para melhorar o desempenho de nosso aplicativo. Esse trabalho pode ser dividido em 4 partes Vendo o que está atualizando Usando as Ferramentas do desenvolvedor do Chrome com o React Developer Tools, podemos ver como nossos componentes estão sendo atualizados. Gerenciando as atualizações Então, agora que podemos ver onde e quando nosso aplicativo está sendo atualizado, devemos saber como evitar essa atualização. Ao verificar o React Lifecycle Component, podemos ver que no ciclo de atualização temos o método shouldComponentUpdate antes da renderização, podemos manipulá-lo ao nosso favor. Throttling and Debouncing Utilizando essas técnicas para evitar flood de cliques. Realizando Update de estados Para atualizar estados em react temos: context, redux, hooks, callback, e diretamente no componente. Também podemos estender Componente ou PureComponent ou apenas usar componentes funcionais (ou talvez react.memo?). Por escolher uma dessas combinações podemos estar fazendo renderização inútil. Como escolher a mlehor combinação? artigos publicados (itnext): 1 - https://itnext.io/improving-react-application-perfomance-by-avoiding-unnecessary-updates-bd96d03dec40 2 - https://itnext.io/how-to-update-react-states-in-order-to-avoid-useless-rendering-8c77a230c40b