O que de fato causa um re-render em um componente React, e por que isso não é a mesma coisa que uma atualização do DOM?

Um componente re-renderiza quando o estado dele muda, quando um contexto que ele consome publica um valor novo, ou quando o pai re-renderiza e produz um elemento novo para ele. Renderizar apenas chama a função e produz uma descrição da UI. O React então compara isso com a árvore anterior e aplica só as mudanças de DOM que diferem, então a maioria dos re-renders não toca no DOM.

Três coisas disparam isso: uma atualização de estado no componente, uma mudança no valor de um contexto que ele assina, ou o pai re-renderizando. Essa última é onde as pessoas se surpreendem, porque um render do pai roda de novo toda função filha independentemente de as props dela terem mudado de valor. Mas renderizar só produz uma árvore de elementos. O React reconcilia aquilo contra a árvore anterior e aplica o conjunto mínimo de mutações no DOM, então um re-render costuma ser barato e não tocar no DOM nenhuma vez. Os casos caros são subárvores grandes e computação pesada dentro do corpo do render. Quando uma página parecia lenta em um produto em que eu trabalhei, eu abri o profiler do React DevTools em vez de chutar, e o culpado era um único contexto guardando ao mesmo tempo o usuário atual e uma string de busca ao vivo, então cada tecla re-renderizava toda a casca autenticada. Separar aquilo em dois contextos resolveu em umas dez linhas. Eu só recorro ao memo depois que o profiler me diz que uma subárvore específica é o problema.