Actualización de la UI de React: fases de render y commit

Proceso de actualización de la interfaz en React: del disparador al commit

React actualiza la interfaz mediante una secuencia estricta: disparador → renderizado → commit. Durante la fase de renderizado, React calcula el nuevo árbol de DOM virtual sin tocar el DOM real. La fase de commit aplica los cambios de forma sincrónica. Esta separación permite optimizaciones de rendimiento, especialmente en modo concurrente, donde el renderizado puede interrumpirse según la prioridad.

Fase de renderizado: reconciliación y el árbol Fiber

La fase de renderizado construye un árbol en progreso basado en la estructura Fiber actual. Un Fiber es una lista enlazada de nodos que representan la jerarquía de componentes. Cada nodo mantiene una referencia a su versión anterior mediante la propiedad alternate para facilitar la comparación.

La reconciliación compara los nuevos elementos de React (de JSX) con los antiguos. Valores estables de key garantizan un emparejamiento preciso, minimizando actualizaciones innecesarias.

Esta fase se divide en dos etapas: beginWork (de arriba hacia abajo) y completeWork (de abajo hacia arriba):

• beginWork: Verifica si el renderizado es necesario (bailout si no lo es), llama a la función de renderizado, establece banderas (Placement, Update, Deletion) y se recurre a los hijos.
• completeWork: Finaliza un nodo tras procesar sus hijos, agrega las banderas del subárbol para optimizar el commit.

Las banderas del subárbol propagan información de cambio hacia arriba, omitiendo ramas limpias durante el commit.

| Bandera | Descripción |

|------|-------------|

| Placement | Insertar un nodo DOM |

| Update | Actualizar atributos o texto |

| Deletion | Eliminar un elemento |

| Ref | Manejar refs |

| Layout | Programar useLayoutEffect |

| Passive | Programar useEffect |

Las banderas se establecen durante el renderizado y se ejecutan durante el commit.

Fase de commit: mutación del DOM

La fase de commit es sincrónica y atómica, dividida en tres subfases:

• beforeMutation: Llama a getSnapshotBeforeUpdate (para componentes de clase) y limpia las refs antiguas.
• mutation: Aplica las banderas —insertando, actualizando o eliminando nodos del DOM.
• layout: Ejecuta componentDidMount/Update, useLayoutEffect de forma sincrónica, actualiza refs y programa useEffect.

Después de layout, el navegador asume el control: recálculo de estilos → diseño/reflow → pintado → composición. React no interfiere en estos pasos.

Pipeline del navegador tras el commit

useEffect se ejecuta de forma asíncrona, después del pintado —pero para eventos discretos (clic, keydown, input), puede ejecutarse antes del pintado para mantener la reactividad.

Eventos discretos:

• clic, keydown, input, submit

Eventos continuos (scroll, mousemove) siempre se ejecutan después del pintado.

Modo concurrente: renderizado interrumpible

En modo concurrente, el renderizado se divide en unidades de trabajo con prioridad. Las actualizaciones de alta prioridad (como escribir) pueden interrumpir las de baja prioridad (renderizado anterior), descartando el árbol en progreso.

El commit permanece igual: sincrónico y único por actualización. Esto preserva la consistencia del DOM.

El renderizado puede reiniciarse múltiples veces sin commit si se realiza un bailout.

Conclusiones clave

• El renderizado calcula cambios en memoria; las mutaciones del DOM solo ocurren en commit cuando hay banderas.
• beginWork/completeWork optimizan el recorrido usando bailout y banderas de subárbol.
• useLayoutEffect se ejecuta de forma sincrónica tras la mutación; useEffect se ejecuta asíncronamente tras el pintado.
• El modo concurrente permite interrumpir el renderizado, pero el commit sigue siendo indivisible.
• Las claves estables son cruciales para una reconciliación eficiente.

— Editorial Team