Dissecando React - Parte 2: Renderização e Imutabilidade
Tags: react, javascript, frontend, ptbr
Published: 2019-07-02 01:53:16

---
title: Dissecando React - Parte 2: Renderização e Imutabilidade
published: true
description: Uma série com o objetivo de explicar os conceitos de React a fim de dar fundamento nas partes básicas para pessoas com pouca experiência com a biblioteca.
tags: React, JavaScript, Front-End, PT-BR
series: Dissecando React
---

# O que são Elementos?

Resumidamente, seriam nossas moléculas em uma aplicação em React. São nossos elementos que compõem nossos componentes, e portanto, não devem ser confundidos com tal.
```javascript
    const meuElemento = <p>Conteudo do Elemento</p>
```
Acima, um exemplo de um elemento. Como evidenciado na [documentação do React](https://reactjs.org/docs/rendering-elements.html), elementos são meros objetos e são de baixissimo custo para sua criação, quando comparados com elementos do **DOM** do navegador. Deixando a cargo do **React DOM** controlar e atualizar os elementos no **DOM**.

# Imutabilidade e Renderização

Precisamos compreender alguns termos importantes e que são responsáveis pela renderização de nossos elementos.

Primeiramente, **root**. Observe o trecho de código a seguir:
```javascript
    <div id="root"></div>
    
    const titulo = <h1>Conteudo do Titulo</h1>
    ReactDOM.render(titulo, document.getElementById('root'));
```
**Root** define o nó (ou *node*) onde nosso ReactDOM irá gerenciar os elementos ali inseridos. No exemplo acima, estamos inserindo o elemento **titulo** na nossa `div` raíz.

Nossas aplicações geralmente possuirão apenas um único *root node*. Essa situação pode ser diferente em aplicações que estão passando por um processo de integração com React.

No entanto, como o ReactDOM pode saber o que mudou e que deve ser atualizado na nossa tela? Seguindo o princípio da **imutabilidade**. Elementos em React são imutáveis, ou seja, não podem mudar seus atributos uma vez que criados. Eles representam sua interface em um determinado ponto do tempo. Profundo, não?

Então, segundamente, temos um outro nome importante: **ReactDOM.render()**. Até então, nossa única forma de criar um novo elemento e renderizá-lo. Todas as vezes que mudarmos o conteúdo de nossa tag `titulo` teríamos que chamar `ReactDOM.render()` novamente e recriar este elemento.

E é neste ponto que a magia acontece...

# Em time que tá ganhando não se mexe... Ou quase isso.

É basicamente isso que o ReactDOM faz. Compara os elementos e seus filhos com os elementos anteriores, e só atualiza no DOM as alterações necessárias, evitando assim um carregamento total da página para uma simples alteração.

Por mais que nossos elementos sejam complexos, apenas as partes que apresentarem uma mudança quando comparados a suas versões anteriores serão re-renderizados na tela.

Tendo este comportamento em mente, fica muito mais fácil entender como são tratados nossos elementos no **ReactDOM**.

# Conclusão

Enquanto nossa leitura anterior foi mais intensa, a de hoje já foi um pouco mais simples, mas não menos importante. Entender o princípio da imutabilidade e como nosso ReactDOM atualiza as informações no DOM de nosso navegador são peças chave para realmente dominar o comportamento de nossos componentes e aplicações.

Espero que este texto sirva de alguma ajuda para fixar os conceitos de React, e que sirva como uma ponte pro nosso próximo texto que está por vir, onde falarei melhor sobre componentes, classes e funções.

Seu feedback é muito importante para que eu sempre melhore! Aguardo seu contato nos comentários ou pessoalmente.

Até a proxima!