¿Qué provoca realmente que un componente de React se vuelva a renderizar y por qué eso no es lo mismo que una actualización del DOM?

Un componente se vuelve a renderizar cuando cambia su propio estado, cuando un contexto que consume publica un valor nuevo o cuando su padre se vuelve a renderizar y produce un elemento nuevo para él. Renderizar solo llama a la función y produce una descripción de la interfaz. React entonces la compara con el árbol anterior y solo aplica los cambios del DOM que difieren, así que la mayoría de los re-renderizados no tocan el DOM en absoluto.

Tres cosas lo disparan: una actualización de estado en el componente, un cambio en un valor de contexto al que está suscrito, o que el padre se vuelva a renderizar. Ese último es donde la gente se sorprende, porque un render del padre vuelve a ejecutar cada función hija sin importar si sus props cambiaron de valor. Pero renderizar solo produce un árbol de elementos. React lo reconcilia con el árbol anterior y aplica el conjunto mínimo de mutaciones del DOM, así que un re-renderizado suele ser barato y no toca el DOM en absoluto. Los casos caros son subárboles grandes y cálculo pesado dentro del cuerpo del render. Cuando una página se sentía pesada en un producto en el que trabajé, abrí el profiler de React DevTools en vez de adivinar, y el culpable era un único contexto que guardaba a la vez el usuario actual y una cadena de búsqueda en vivo, así que cada pulsación de tecla volvía a renderizar todo el armazón autenticado. Partirlo en dos contextos lo arregló en unas diez líneas. Solo recurro a memo cuando el profiler me dice que un subárbol concreto es el problema.