DEV Community

Cover image for Debaixo do capô: Entendendo a performance no React
Stanley Gomes
Stanley Gomes

Posted on • Updated on

Debaixo do capô: Entendendo a performance no React

Pessoal, muito se fala sobre a alta performance de renderização de aplicações desenvolvidas utilizando React. Um dos motivos que mais são importantes quando se toca neste ponto é o React Conciliation.

Esta API do React é responsável por observar e gerenciar o que muda a cada ciclo de re-renderização da sua aplicação/componentes. Nesse processo o React utiliza um algoritmo chamado React’s “diffing” algorithm, que é responsável por entender melhor o que muda a cada renderização e alterar o DOM da forma mais performática possível.

Alt Text

Existem algumas ações simples que o algoritmo faz para entender essas diferenças entre as versões de renderizações, que nós podemos observar para trabalhar com mais performance.

Elementos de diferentes tipos

Quando o React compara as versões, ele observa o tipo de elemento que está renderizando aquela árvore de componentes. Quando o elemento é alterado, todos seus filhos são re-renderizados. Veja no exemplo abaixo:

Neste cenário, eu vou alterar um elemento que era do tipo div e mudou para o tipo span.

<!-- Versão anterior do componente -->
<div>
  <ListaDeUsuarios />
</div>

<!-- Nova versão do componente -->
<span>
  <ListaDeUsuarios />
</span>
Enter fullscreen mode Exit fullscreen mode

Neste caso acima, todo esse componente será re-renderizado.

Elementos de mesmo tipo

Quando o elemento mantem seu tipo entre as versões o react analisa outras características para decidir o que vai ser re-renderizado.

Neste caso abaixo, o componente mantêm o tipo div entre as versões, porém o conteúdo da prop title é alterado. Neste caso, o React vai renderizar apenas esta alteração individual da prop.

<!-- Versão anterior do componente -->
<div className="header" title="Meu App" />

<!-- Nova versão do componente -->
<div className="header" title="Meu App - Usuários" />
Enter fullscreen mode Exit fullscreen mode

Um outro exemplo é a tag style, que é tratada de forma especial. Nesse caso abaixo, apenas a propriedade color do CSS do elemento em questão é alterada, então o React vai entender que apenas essa propriedade deve ser re-renderizada, ao mesmo tempo que o textAlign continua imutável.

<!-- Versão anterior do componente -->
<div style={{color: 'red', textAlign: 'left'}} />

<!-- Nova versão do componente -->
<div style={{color: 'green', textAlign: 'left'}} />
Enter fullscreen mode Exit fullscreen mode

Lista de elementos

Ao renderizar uma lista de elementos, você pode utilizar uma propriedade chamada key para que instruí-lo a re-renderizar os elementos da lista que mudaram as keys.

<!-- Versão anterior do componente -->
<ul>
  <li key="first">first</li>
  <li key="second">second</li>
</ul>

<!-- Nova versão do componente -->
<ul>
  <li key="first">first</li>
  <li key="second">second</li>
  <li key="third">third</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Caso a ordem desses elementos seja alterada, os elementos que mantiverem mesmas keys não serão re-renderizados.

<!-- Versão anterior do componente -->
<ul>
  <li key="first">first</li>
  <li key="second">second</li>
</ul>

<!-- Nova versão do componente -->
<ul>
  <li key="second">second</li>
  <li key="first">first</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Estas são técnicas que nos ajudam a escrever um código que o motor de renderização do React compreenda a melhor forma de re-renderizar nossos componentes e assim ganhamos performance.

Alt Text

Este post foi baseado na documentação do React Conciliation, usando os mesmos exemplos apresentados na DOC.


Este post não seria possível sem o trabalho de pesquisa e discussão do time do capítulo de frontend do LuizaLabs.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Até mais.

Discussion (2)

Collapse
barbosamarlem profile image
Marlem Barbosa

Boa Stanley!
Legal entender essa dinâmica da renderização.

Collapse
stanley profile image
Stanley Gomes Author

Bom demais que tenha ajudado. Valeu!!!