¿Cómo funciona el renderizado de React?

Respuesta directa

Qué debe cubrir una buena respuesta

Cómo funciona

Un render es React llamando a la función del componente para producir una descripción de la interfaz. Ocurre cuando cambia el estado propio del componente, cuando su padre renderiza o cuando cambia un contexto que consume. El resultado se compara con la salida anterior durante la reconciliación y solo las diferencias reales se aplican al DOM. Renderizar es barato por diseño; lo caro son los cálculos pesados dentro del render y los efectos que se disparan tras cada commit.

Ejemplo

Memorizar un hijo solo ayuda si sus props conservan identidades estables; no detiene por sí solo el render del padre. Pasar un objeto inline o una arrow function a un elemento de lista memorizado crea una referencia nueva en cada render, así que React.memo ve props cambiadas y no ahorra nada hasta que useMemo o useCallback las estabilizan.

Errores frecuentes

• Equiparar un re-render con una actualización del DOM.
• Mutar el estado en el sitio y esperar un render, cuando React compara referencias.
• Envolver cada componente en memo antes de medir si los renders son realmente lentos.

Una estructura útil para responder

Responde desde tu propia experiencia.

No memorices un guion: usa solo ejemplos que puedas explicar con honestidad en preguntas posteriores.