Resumo
A resposta ficou meio longa. Em resumo, o React possui um algoritmo que compara duas árvores de elementos no DOM para saber se deve atualizá-los ou não. Esse algoritmo atualizará a árvore DOM quando:
- O nó raiz da árvore é de tipo diferente (e.g.
<div> <a>Oi</a> </div>
e <button> <a>Oi</a> </button>
);
- Algum atributo foi modificado (e.g.
<div className="a" />
e <div className="b' />
);
- Alguma propriedade do componente foi modificada (e.g.
<Timer time={10} />
e <Timer time={15} />
);
- Algum estado do componente foi modificado;
- A comparação de nós filhos encontra diferenças. Essa comparação é uma recursão nas duas árvores ao mesmo tempo, comparando nó a nó.
E, a relação com os hooks mencionados é simplesmente que eles são executados em toda renderização, mas fazem uso de um array de dependências para definir se o callback passado para estes hooks deve ser executado novamente ou não.
Como funciona a re-renderização?
Este tópico e toda explicação do algoritmo de diff é com base na documentação Reconciliation.
Sempre que o render()
é executado em um componente classe, ou quando um componente funcional é executado, uma árvore de elementos é retornada. Quando o estado ou as propriedades são atualizadas, uma nova árvore é retornada. Então, o React precisa diferenciar as duas árvores para saber se precisa renderizar algo.
A re-renderização não desmonta e remonta os componentes. Ela apenas atualiza as diferenças encontradas de acordo com as regras definidas pelo algoritmo de diff, explicado abaixo.
Algoritmo de diff
Para identificar as diferenças de uma forma computacionalmente barata, o React criou o seu próprio algoritmo de diff, implementando um algoritmo heurístico O(n) com base em duas premissas:
- Dois elementos de tipos diferentes produzirão árvores diferentes;
- O desenvolvedor pode sugerir quais elementos filho podem ser estáveis em diferentes renderizações com uma propriedade
key
.
O comportamento do diff varia de acordo com o tipo dos elementos raízes a serem comparados.
Elementos de tipos diferentes
Quando o nó raiz de uma árvore é modificado, o React desmontará toda a árvore e montará uma nova do zero. Por exemplo:
<div>
<Counter />
</div>
<span>
<Counter />
</span>
O código acima fará com que o Counter
seja remontado.
Elementos DOM do mesmo tipo
Ao atualizar elementos DOM do mesmo tipo, o React observa os atributos, atualizando apenas os atributos modificados. Por exemplo:
<div className="before" title="stuff" />
<div className="after" title="stuff" />
Nesse caso, o React modificará apenas o className
do nó. No caso do atributo style
, o React consegue identificar qual propriedade foi modificada.
Componentes do mesmo tipo
Quando um componente atualiza, a instância é a mesma, então o estado é mantido entre as renderizações. O React atualiza as propriedades da instância do componente para corresponder ao novo elemento.
Após essa atualização das propriedades, o algoritmo de diff é executado, comparando o resultado anterior ao atual.
Nota: Como a documentação do Reconciliation mal cita o State, quero citar outra documentação aqui, a State and Lifecycle. Esta diz que, graças à chamada do setState
, o React sabe que houve uma mudança de estado, e então executa o render()
para verificar o que deve ser modificado na tela. É por isso que você não pode modificar o estado diretamente, sem a chamada da função setState()
.
Apesar do exemplo dado ser para componentes classe, essa informação pode ser levada para os componentes funcionais.
Recursão nos filhos
Por padrão, quando há recursão sobre os filhos de um nó DOM, o React apenas itera em ambas as listas de filhos ao mesmo tempo e gera uma mutação sempre que houver uma diferença. Por exemplo:
<ul>
<li>primeiro</li>
<li>segundo</li>
</ul>
<ul>
<li>primeiro</li>
<li>segundo</li>
<li>terceiro</li>
</ul>
O React entenderá que o <li>primeiro</li>
e <li>segundo</li>
são iguais, e adicionará o nó <li>terceiro</li>
. Por causa disso, inserir um elemento no começo ou no meio da lista fará com que mais de um elemento seja re-renderizado desnecessariamente.
Chaves (key
)
Para resolver o problema citado acima, o React aceita o atributo key
em qualquer elemento. Quando os filhos possuem uma key
definida, ela é utilizada para verificar se representam o mesmo nó ou não, e então realizar a re-renderização quando necessário.
É por isso que utilizar o index
como key
nem sempre é uma opção válida. Acabaria na mesma situação de não utilizar key
nenhuma.
Para mais informações sobre a propriedade key
, leia Para que serve e como definir a prop "key" no React?
Fatores de atenção
De acordo com o algoritmo explicado acima, surgem dois pontos de atenção:
O algoritmo não tentará combinar sub-árvores de diferentes tipos de componentes. Se você alternar entre dois tipos de componentes com saída muito semelhante, convém torná-los do mesmo tipo. Na prática, isso não é considerado um problema.
As chaves (key
) devem ser estáveis, previsíveis e únicas. Chaves instáveis (como aquelas produzidas por Math.random()
ou Date.now()
) farão com que muitas instâncias de componentes e nós DOM sejam desnecessariamente recriados, o que pode causar degradação de desempenho e perda de estado em componentes filhos.
Os hooks citados
useEffect
(ou componentDidUpdate
)
Conforme a documentação diz, por padrão, os efeitos são executados após cada renderização concluída, mas você pode optar por executá-los apenas quando certos valores forem alterados (com base no array de dependência). Existe uma pergunta que aborda esse assunto: O que é e por que devo fornecer um “array de dependências” para os hooks do React?
useMemo
O useMemo
é executado durante a renderização e retorna um valor memoizado. Também recebe um array de dependências, fazendo com que o valor seja recalculado apenas quando uma dessas dependências for modificada. É útil para cálculos "caros".
useCallback
Similar ao useMemo
, o useCallback
retorna um callback memoizado (e não um valor). É útil para momentos que dependem da comparação por referência para evitar uma re-renderização.
Eu escrevi uma resposta mais aprofundada sobre o useMemo
e useCallback
em Qual é a diferença entre os hooks useMemo e useCallback do React?
O que eles têm em comum?
Todos esses hooks são executados a cada renderização. A questão é que eles aceitam um array de dependências para definir se a função de callback passada para eles deve ser de fato executada ou não.
Por exemplo, um array vazio como em useCallback(() => {}, [])
significa que será executado apenas uma vez, já que nenhum valor será atualizado nas próximas renderizações (não existe nenhum valor no array).
Já no caso useMemo(() => fatorial(count), [count])
, significa que sempre que houver uma renderização e count
ter seu valor modificado, o () => fatorial(count)
será executado.
Então, o array de dependências não causa uma re-renderização, mas ele é utilizado após a re-renderização para saber se o callback será executado ou não.
há distinção
) mas, de fato reforçando o código gerado é o mesmo. Talvez a nova versão tão aguardada seja diferente