Este artigo trata sobre técnicas e práticas para melhorar o desempenho e a eficiência das aplicações desenvolvidas em React. Uma aplicação React pode, em determinados cenários, tornar-se lenta e consumir muitos recursos do sistema, que pode prejudicar a experiência do usuário. Portanto, é importante entender alguns conceitos para evitar tais problemas e melhorar a performance do sistema.
REACT RENDERING
As renderizações em React ocorrem quando o estado de um componente ou as suas propriedades mudam, levando a uma atualização na interface do usuário. O processo de renderização envolve a criação de uma representação virtual do DOM (Virtual DOM), comparação dessa representação com o estado anterior do DOM e, em seguida, a aplicação das diferenças no DOM real.
- Triggering a render (delivering the guest’s order to the kitchen).
- Rendering the component (preparing the order in the kitchen).
- Committing to the DOM (placing the order on the table).
PREVENTING WASTED RENDERING
Um dos maiores problemas de performance no React são renders desnecessários. Para isso, é interessante utilizar:
- useMemo() - Recebe dois parâmetros: a função, e as dependências que são atualizadas. Ele memoriza os valores das dependências e compara se permanecem iguais ou se modificaram. Se permanecem, ele não re-renderiza. Evita cálculos desnecessários.
- useCallback() - Memoriza funções. Evita re-renderizações desnecessárias de componentes filhos
Code Splitting: Dividir o código e bundles menores.
Lazy loading - Permite primeiro um carregamento leve para o usuário, uma tela leve, enquanto baixa/carrega chamadas e componentes pesados por trás. (Ex.: loading components, skeleton, etc.)
Top comments (0)