Me explique o que acontece quando o React re-renderiza um componente. Como a reconciliação decide o que de fato chega no DOM?

Quando o estado muda, o React executa de novo a função do componente para produzir uma nova árvore de elementos e compara essa árvore com a anterior. Ele compara tipos de nó e keys posição por posição: o mesmo tipo significa que o React atualiza as props no lugar, um tipo diferente significa que ele desmonta a subárvore antiga e monta uma nova. Só o conjunto mínimo de mudanças resultante é aplicado no DOM real.

Então, quando o estado muda, o React chama a função do componente de novo, e isso gera uma nova árvore de elementos. Essa é a fase de render, e nada tocou no DOM ainda. Depois ele percorre a árvore nova contra a antiga. Em cada posição ele olha primeiro para o tipo do elemento. Se for o mesmo tipo, digamos uma div que continua div, ele mantém o nó do DOM existente e o estado existente e só aplica as props que mudaram. Se o tipo for diferente, ele joga a subárvore inteira fora e constrói uma nova, o que significa que qualquer estado lá dentro se perdeu. Em listas ele usa keys em vez da posição pura, então os itens podem se mover sem serem reconstruídos. Aí todas as mudanças coletadas são aplicadas em uma única passada de commit. O motivo de eu me importar com isso na prática é que uma vez eu depurei um formulário que se resetava a cada tecla digitada, e era porque o pai renderizava ele dentro de um condicional que trocava o tipo do elemento do wrapper. Quando você conhece as regras do diff, isso vira um conserto de cinco minutos em vez de uma tarde inteira.