Explícame qué pasa cuando React vuelve a renderizar un componente. ¿Cómo decide la reconciliación qué llega de verdad al DOM?

Cuando cambia el estado, React vuelve a ejecutar la función del componente para producir un nuevo árbol de elementos y luego lo compara con el árbol anterior. Contrasta tipos de nodo y keys posición por posición: si el tipo es el mismo, React actualiza las props en el sitio; si el tipo es distinto, desmonta el subárbol viejo y monta uno nuevo. Solo el conjunto mínimo de cambios resultante se aplica al DOM real.

Cuando cambia el estado, React llama otra vez a la función del componente y eso le da un nuevo árbol de elementos. Esa es la fase de render, y todavía no ha tocado el DOM. Después recorre el árbol nuevo contra el viejo. En cada posición mira primero el tipo de elemento. Si es el mismo tipo, digamos que un div sigue siendo un div, conserva el nodo del DOM y el estado que ya existían y solo parchea las props que cambiaron. Si el tipo es distinto, tira el subárbol entero y construye uno nuevo, así que cualquier estado que hubiera dentro desaparece. En las listas usa keys en lugar de la posición pura, de forma que los elementos pueden moverse sin reconstruirse. Luego todos los cambios recogidos se aplican en una sola pasada de commit. Esto me importa en la práctica porque una vez depuré un formulario que se reiniciaba con cada tecla, y era porque el padre lo renderizaba dentro de un condicional que cambiaba el tipo del elemento contenedor. Cuando conoces las reglas del diff, eso pasa de ser una tarde perdida a un arreglo de cinco minutos.