El ciclo de renderizado en React: cómo funciona y qué lo provoca

Tiempo de lectura: 3 minutos

Uno de los conceptos más importantes para entender cómo funciona React es su ciclo de renderizado. Comprenderlo permite detectar errores comunes, optimizar el rendimiento y escribir componentes más eficientes.

En este tutorial aprenderás qué es el renderizado en React, cuándo ocurre, qué lo provoca y cómo puedes controlarlo.

Qué significa renderizar en React

Renderizar en React significa convertir el estado actual de un componente en elementos que se muestran en la interfaz de usuario.

Cada vez que React renderiza un componente, ejecuta la función del componente para generar una representación virtual de la interfaz. Esta representación se compara con la versión anterior y React solo actualiza el DOM real cuando detecta cambios.

Este proceso permite que React sea eficiente y rápido.

El proceso de renderizado en React

El ciclo de renderizado se puede dividir en tres fases principales.

Fase de render

En esta fase React ejecuta el componente para generar el Virtual DOM. Durante este proceso:

• Se evalúa el JSX
• Se calculan los valores derivados del estado y props
• No se modifica todavía el DOM real

React solo está preparando la nueva versión de la interfaz.

Fase de reconciliación

React compara el Virtual DOM anterior con el nuevo. Este proceso se conoce como reconciliación.

React identifica qué elementos han cambiado y cuáles pueden mantenerse sin modificar. Gracias a esta comparación, evita actualizar toda la interfaz y solo cambia lo necesario.

Fase de commit

En esta fase React aplica los cambios al DOM real.

Aquí es cuando el usuario ve los cambios reflejados en la interfaz. También es cuando se ejecutan efectos como los definidos en useEffect.

Qué provoca un re-render en React

Un re-render ocurre cuando React vuelve a ejecutar un componente para generar una nueva versión de la interfaz. Esto puede suceder por varias razones.

Cambios en el estado

Cuando el estado de un componente cambia, React vuelve a renderizar ese componente.

Ejemplo:

const [contador, setContador] = useState(0);

setContador(contador + 1);

Cada vez que se llama a la función actualizadora, el componente se renderiza de nuevo.

Cambios en las props

Cuando un componente padre cambia las props que envía a un hijo, el componente hijo también se vuelve a renderizar.

Renderizado del componente padre

Si un componente padre se renderiza, todos sus hijos también se renderizan por defecto, aunque sus props no hayan cambiado.

Este comportamiento es uno de los motivos por los que la optimización es importante en aplicaciones grandes.

Cambios en el contexto

Cuando el valor de un Context cambia, todos los componentes que lo consumen se renderizan nuevamente.

Ejemplo práctico de re-render

function Hijo() {
  console.log("Render hijo");
  return <p>Componente hijo</p>;
}

function Padre() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <button onClick={() => setContador(contador + 1)}>
        Incrementar
      </button>
      <Hijo />
    </div>
  );
}

Aunque el componente hijo no utilice el estado, se volverá a renderizar cada vez que el padre lo haga.

Cómo evitar renders innecesarios

React ofrece varias herramientas para optimizar el renderizado.

React.memo

Permite memorizar un componente para que solo se renderice cuando cambien sus props.

const Hijo = React.memo(function Hijo() {
  console.log("Render hijo");
  return <p>Componente hijo</p>;
});

useMemo

Permite memorizar resultados de cálculos costosos.

const resultado = useMemo(() => {
  return calcularValorComplejo(datos);
}, [datos]);

useCallback

Memoriza funciones para evitar que se creen en cada render.

const manejarClick = useCallback(() => {
  console.log("Click");
}, []);

Estas herramientas ayudan a mejorar el rendimiento cuando se usan correctamente.

Qué es el Virtual DOM

El Virtual DOM es una representación en memoria del DOM real. React lo utiliza para comparar versiones de la interfaz y aplicar solo los cambios necesarios.

Gracias a este sistema, React reduce el número de operaciones sobre el DOM real, que son costosas en términos de rendimiento.

Reglas importantes sobre el renderizado

Los componentes deben comportarse como funciones puras. Esto significa que, para los mismos props y estado, deben devolver siempre el mismo resultado visual.

No debes modificar directamente el estado ni las props.

Evita realizar efectos secundarios durante el render. Estos deben ejecutarse dentro de useEffect.

Diferencia entre render y actualización del DOM

Un error común es pensar que cada render modifica el DOM real. En realidad, React puede renderizar muchas veces sin actualizar la interfaz visible.

Solo cuando React detecta cambios durante la reconciliación se actualiza el DOM real.

Cómo detectar renders innecesarios

Puedes usar herramientas como:

• React Developer Tools
• Consolas con logs
• React Profiler

Estas herramientas permiten analizar cuándo se renderizan los componentes y por qué.