La fase de renderizado y el commit del DOM

El ciclo de trabajo de React tiene dos fases principales: la fase de renderizado y la fase de commit. Durante la fase de renderizado, React llama a las funciones de sus componentes y construye una representación virtual de la interfaz (el árbol de Fiber). Durante la fase de commit, React aplica al DOM real los cambios del árbol de Fiber.

En React 18 Concurrent Mode, la fase de renderizado se puede pausar, interrumpir o reiniciar. React puede llamar varias veces a la función de su componente antes de confirmar cualquier cambio. Por eso las funciones de los componentes deben ser puras: no pueden tener efectos secundarios, ya que la función podría ejecutarse más de una vez por cada actualización visible.

A diferencia de la fase de renderizado, la fase de commit siempre es síncrona y se ejecuta hasta completarse. React no puede interrumpirse mientras aplica cambios al DOM. Esto garantiza que el DOM nunca quede en un estado parcialmente actualizado. Después de cada commit, los usuarios siempre ven una interfaz completamente coherente.

La fase de commit tiene tres subfases: antes de la mutación (el método getSnapshotBeforeUpdate de los componentes de clase se ejecuta aquí para leer los valores del DOM antes de los cambios), mutación (React inserta, actualiza y elimina nodos del DOM) y layout (aquí se ejecutan los efectos síncronos, específicamente useLayoutEffect y componentDidMount/componentDidUpdate de los componentes de clase).

useEffect es un efecto pasivo, lo que significa que no se ejecuta durante la fase de commit. Una vez que termina la fase de commit y el navegador ha realizado el pintado, React programa los efectos pasivos de forma asíncrona. Estos se ejecutan después de que el navegador haya tenido la oportunidad de mostrar en pantalla el DOM actualizado.

El navegador pinta entre la fase de layout (donde se ejecuta useLayoutEffect) y la fase de efectos pasivos (donde se ejecuta useEffect). Esta diferencia de tiempos es fundamental: useLayoutEffect se ejecuta antes del pintado y useEffect, después. En los efectos que cambian la salida visual, esta distinción es muy importante.

Si un useEffect lee el DOM y actualiza el estado (por ejemplo, mide un elemento y establece un estado de tamaño), React vuelve a renderizar y realiza otro commit. El navegador pinta dos veces: una con el tamaño inicial y otra con el tamaño corregido. Es posible que los usuarios vean un destello del tamaño incorrecto antes de que aparezca la corrección.

React construye internamente un árbol de nodos «fiber», uno por cada instancia de componente. Cada fiber contiene el estado, los efectos y la salida del componente. Durante la fase de renderizado, React crea un nuevo árbol de fibers en proceso de trabajo. Durante la fase de commit, el árbol en proceso de trabajo se convierte en el árbol actual y el árbol anterior se reutiliza.

React Strict Mode invoca intencionadamente dos veces las funciones de los componentes y los efectos durante el desarrollo para ayudar a detectar efectos secundarios. Tanto useLayoutEffect como useEffect se montan, desmontan y vuelven a montar. Esta doble invocación no ocurre en producción. Su objetivo es poner de manifiesto errores en los que los efectos no se limpian correctamente.

Como la fase de renderizado puede interrumpirse y volver a ejecutarse, las funciones de los componentes deben producir la misma salida para las mismas entradas y no tener efectos secundarios. Las mutaciones, suscripciones y llamadas a API que se realicen en el cuerpo de la función (en lugar de en efectos) se ejecutarán más veces de lo esperado en Concurrent Mode, lo que provocará errores.

No lea nunca directamente las propiedades del DOM dentro del cuerpo de la función del componente. Es posible que el DOM aún no exista (en el renderizado en el servidor) o que esté desactualizado (en nuevos renderizados). Lea siempre el DOM dentro de useLayoutEffect (para lecturas previas al pintado) o de useEffect (para lecturas posteriores al pintado), donde se garantiza que el DOM está actualizado.

¿En qué subfase de la fase de commit de React se ejecuta useLayoutEffect?

La fase de renderizado de React construye el árbol de fibers y puede interrumpirse; la fase de commit aplica los cambios al DOM y siempre es síncrona. El commit tiene tres subfases: antes de la mutación, mutación y layout. useLayoutEffect se ejecuta en la fase de layout antes del pintado. useEffect se ejecuta como efecto pasivo después del pintado.