5

Muito comumente vejo falarem que um componente do React será re-renderizado por causa de uma prop, estado, valor de contexto alterado, etc.

  • Quais são os fatores que de fato influem na re-renderização de um componente?
  • Nos componentes funcionais, há alguma relação com useEffect, useMemo ou useCallback?

Note que não estou querendo saber especificamente da primeira renderização, mas sim dos fatores que fazem uma segunda (ou terceira, quarta, etc) renderização ocorrer.

Não sei se, nesse assunto, há distinção entre os "componentes funcionais" e os (antigos) "componentes de classe". Se houver, gostaria que fosse enfatizado nos componentes funcionais, mas uma breve menção sobre isso em relação aos componentes de classe também seria bom.

3
  • é muito ampla, misturando hooks com component class que são diferentes o jeito de fazer, mas, o comportamento é o mesmo.
    – novic
    Commented 21/10/2020 às 16:12
  • 1
    @novic, no final da pergunta eu preferi por colocar o enfoque nos próprios componentes funcionais (que dão a relação com os hooks), então não acho que de fato ocorre essa “mistura”... Commented 21/10/2020 às 16:16
  • A diferença é de como fazer, os estilos, isso mesmo estilos de programação, mas, o resultado final é o mesmo, eu entendi que você talvez queira apontar diferenças (há distinção) mas, de fato reforçando o código gerado é o mesmo. Talvez a nova versão tão aguardada seja diferente
    – novic
    Commented 21/10/2020 às 16:18

3 Respostas 3

4

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:

  1. Dois elementos de tipos diferentes produzirão árvores diferentes;
  2. 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:

  1. 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.

  2. 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.

0

Estou aprendendo e praticando React e suas dúvidas fritaram muitos dos meus neurônios hoje, sinceramente obrigado, depois de uma boa pesquisa encontrei um conteúdo muito bom que pode te ajudar eu creio(me ajudou) guide to react rendering behavior.

  • useMemo e useCallback são acionados na 'render phase' e são basicamente para otimização, mas não devem conter partes vitais.
  • useEffect é acionado na 'commit phase' o que acontece depois da 'render phase' porque geralmente é reservado para conter código que pode causar inconsistência na UI.

diagrama - render phase & commit phase

0

Resposta curta:

Alterações de Constantes

Resposta longa:

useState retorna um array com sua primeira posição sendo a constante e a segunda posição sendo uma função para setar novos valores a essa constante.

const [user , setUser] = useState(null);

Ao longo do código ao usarmos o setUser vai fazer com que essa constante seja alterada, mas para que isso ocorra é preciso renderizar novamente o componente para que de fato a constante possa receber esse novo valor.

O useEffect só é disparado DEPOIS que o componente foi montado em tela, ou seja tudo que tem dentro dele é ignorado na primeira faze do render.

se voce tem:

const [user, setUser] = useState(null);

useEffect(()=>{
  setUser({name:'stackOverflow'});
},[]);

return (
  {!user && <h1>Ainda sem usuario</h1>}
  {user && <h1>{user.name}</h1>}
)

O primeiro render o usuario é null. Depois de renderizado é disparado o useEffect no qual vai fazer uma alteração de uma constante. Como vimos acima a alteração de uma constante vai disparar o rerender.

Caso o useEffect nao tenha nenhuma alteração de estado por obviedade não vai disparar o segundo render. Mas em 99.9% dos caso (se não 100%) é utilizado o useEffect para executar algo que vá mudar a UI.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .