Em qualquer ambiente de desenvolvimento que envolva ReactJs é muito comum ouvir os termos render, renderizar, renderização...
Quando comecei a desenvolver, esse conceito me soava um tanto quanto abstrato, pra mim era apenas o processo (mágico) pelo qual o React fazia meus componentes aparecem na tela. Em tese é isso mesmo, mas compreender como cada etapa desse processo funciona é indispensável para dominar a construção de componentes, uso de hooks, gerenciamento de estados... Afinal, é a alma do React!
Lembrando que pra compreender bem o processo de render no React, o ideal é ter uma noção básica sobre componentes, hooks básicos (useEffect e useState) e ciclo de vida de componentes.
Uma breve revisão sobre DOM
Pra compreender o que estamos tratando nesse artigo é importante relembrarmos rapidamente o conceito de DOM.
Chamamos de árvore DOM (document object model) a representação estruturada de um documento HTML ou XML na forma de uma árvore de objetos, que pode ser manipulada via código (Javascript). O browser vai ler o documento HTML, transformá-lo em uma árvore hierárquica em que cada elemento (<div>, <h1>, <button>, etc...) virá um nó (node). O nó raiz é chamado document e esses elementos se organizam em relações de pai, filho e irmãos.
Essa árvore pode ser manipulada pelo Javascript, o que permite que os elementos da página sejam acessados, conteúdos e estilos sejam modificados e que o usuário receba respostas a diferentes eventos como cliques e inputs.
Então, resumindo:
- HTML é a estrutura declarativa;
- DOM é uma estrutura 'viva', constituída por elementos manipuláveis que estão em memória; é a interpretação que o browser constroi e que permite a interação do usuário com a página.
Agora, se quiser se aprofundar, deixei algumas sugestões de artigos muito bons no final. (;
Agora sim, Render e suas etapas
O processo de renderização no React acontece em algumas etapas. Primeiro, precisamos entender que, o que acontece basicamente, é a interação entre o React e nossa árvore DOM via createRoot. Essa função é que vai conectar o React a um nó (node) específico (do DOM).
Internamente, o React gerencia uma árvore (antigamente chamada de Virtual Dom, atualmente a galera que mantém e desenvolve o React tem usado menos essa nomenclatura por ser muito genérica). Esse conceito é chamado de Fiber, e trata-se (em linhas muito gerais) de uma estrutura interna de dados que o React usa para gerenciar e processar as atualizações da UI.
Primeira etapa: Trigger
Quando falamos em renderização, temos dois casos possíveis:
Primeira renderização (quando todos os elementos aparecem na tela pela primeira vez);
Atualização do estado de algum dos componentes (re-render).
Quando o seu app é iniciado, o primeiro render é 'triggado', esse é o initial render.
Toda vez que algum evento muda o estado de algum componente (como por exemplo o clicar de um botão, o preenchimento de um input), um novo render será 'triggado'.
Segunda etapa: Rendering
Rendering é, em linhas muito gerais, o React 'pedindo' pra que seus componentes descrevam como eles querem que suas sessões dentro da UI se pareçam.
- Durante essa etapa, o React vai varrer toda a árvore de componentes (internos, começando pelo root e passando por todos os filhos) e identificar quais deles precisam ser atualizados.
Para cada componente que precise de atualização, o React vai chamá-lo (a função dele mesmo: ex.:
function Componente(props) { return <h1>Oi, sou o componente {props.name} que precisa ser atualizado!</h1>; }))
Terceira etapa: Reconciliation
Depois de coletar todas as informações sobre componentes que precisam ou não ser atualizados, o React vai comparar a árvore anterior à nova árvore (gerada pela etapa de render). Esse processo é conhecido como diff.
- O diff gera um conjunto de instruções: quais componentes precisam ser atualizados (e o quê precisa ser atualizado em cada um deles), quais precisam ser mantidos, etc... É o resultado da comparação entre a árvore anterior e a árvore gerada pelo Render.
Quarta etapa: Commit
É a fase em que todas as mudanças são aplicadas à árvore DOM. Depois de atualizar o DOM, o React vai atualizar todas as referências e cada nó (node) da árvore (caso o diff tenha identificado que é necessário), além de todas as instâncias de componentes.
Ao mesmo tempo ele vai montar (componentDidMount) e atualizar (componentDidUpdate) componentes e rodar os hooks useEffect e useLayoutEffect.
Não é magia, é tecnologia
Entender o processo de Rendering no React é essencial pra compreender um pouco do core dessa ferramenta. Isso sem dúvida vai facilitar muito a compreensão de outros conceitos essenciais como ciclo de vida de componentes, gerenciamento de estados, hooks e até na hora de debugar aquela page cheia de estados aninhados loopando sem parar.
Então, dissolvendo toda a magia desse processo de fazer as coisas aparecerem na sua tela, o processo de render é um fluxo muito bem definido em que:
- algo vai disparar o render (trigger);
- o React vai executar os componentes e gerar uma nova árvore (render);
- a árvore gerada será comparada à árvore anterior (reconciliation);
- as mudanças necessárias são aplicadas ao DOM (commit).
Agora que você já entendeu esse fluxo, vai ficar muito mais fácil identificar e evitar renderizações desnecessárias, gerenciar estados e compreender outros conceitos do ReactJS.
E, como prometido, fica aqui uma curadoriazinha de artigos mara pra você se aprofundar:
This article was originally published by DEV Community and written by Caipora dev.
Read original article on DEV Community