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
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:
;
;
SOCIAL SHARE CARD GENERATOR