Squad Front

Appearance

React Internals: Fiber e Reconciliation ​

Este guia explora o funcionamento interno do React, essencial para desenvolvedores seniores que precisam otimizar aplicações complexas e entender o comportamento do framework "sob o capô".

1. O Algoritmo de Reconciliação (Diffing) ​

Quando o estado ou as props de um componente mudam, o React precisa decidir se uma atualização real no DOM é necessária. Ele faz isso comparando a nova árvore de elementos com a anterior.

Regras do Diffing: ​

  • Elementos de Tipos Diferentes: Se um <div> é substituído por um <span>, o React destrói a árvore antiga e constrói uma nova do zero.
  • Elementos do Mesmo Tipo: O React apenas atualiza os atributos modificados (ex: className ou title).
  • Componentes do Mesmo Tipo: A instância é mantida e o estado é preservado; apenas as props são atualizadas.
  • Keys em Listas: O uso de key permite que o React identifique quais itens mudaram, foram adicionados ou removidos, evitando re-renderizações desnecessárias de toda a lista.

2. React Fiber ​

Fiber é a reconstrução do core do React (introduzida na versão 16). É um mecanismo de agendamento (scheduler) que permite que o React interrompa e retome o trabalho de renderização.

Por que o Fiber é importante? ​

Antes do Fiber, a renderização era síncrona e "bloqueante". Se uma árvore fosse muito grande, o navegador travava até terminar. O Fiber permite:

  • Pausar o trabalho: Priorizar tarefas urgentes (como animações ou entrada do usuário) sobre tarefas menos urgentes (como renderizar uma lista longa no fundo).
  • Reutilizar trabalho: Se uma atualização é cancelada ou superada por uma nova, o React pode descartar o trabalho incompleto.

3. Concurrent Rendering (Modo Concorrente) ​

Disponível amplamente a partir do React 18, o modo concorrente permite que o React prepare múltiplas versões da UI simultaneamente.

Hooks de Controle: ​

  • useTransition: Marca uma atualização de estado como uma "transição" não urgente. Isso permite que a UI continue responsiva enquanto o React processa a mudança pesada.
  • useDeferredValue: Permite atrasar a atualização de uma parte da árvore que depende de um valor que muda rapidamente.

4. Como usar esse conhecimento? ​

  • Evite o "Prop Drilling" excessivo: Pode causar re-renderizações em cascata que o reconciliador terá que processar.
  • Use Keys estáveis: Nunca use Math.random() ou o índice do array como key se a lista puder ser reordenada.
  • Entenda o Batching: O React agrupa múltiplas atualizações de estado em uma única renderização para melhorar a performance.

5. Referências ​