Variaciones del hook useEffect en React

El hook useEffect tiene otras variaciones, que son específicas y se usan muy raramente, por eso nos detendremos en ellas brevemente.

La primera variación es el hook useLayoutEffect, que se activa antes de que el navegador redibuje la pantalla. Esta posibilidad puedes usarla para calcular las dimensiones y posición de un componente en función de otros elementos, para que luego, al renderizar, el navegador lo muestre inmediatamente como y donde es necesario. Gracias a esto, por ejemplo, el usuario no verá saltos intermedios del componente al cambiar de posición o tamaño, sino sólo sus versiones finales.

La segunda variación es el hook useInsertionEffect, que se activa antes de cualquier cambio en el árbol DOM, es decir, cuando aún las referencias no están adjuntadas y el DOM no está actualizado. Se aplica principalmente donde es necesario insertar estilos dinámicos de bibliotecas CSS-in-JS antes de cambiar el DOM.