React 18 implementa un nuevo enlace: useInsertionEffect .
Entonces, con useEffect y useLayoutEffect , ¿cuál es el orden de estos 3 ganchos en la generación de componentes?
De acuerdo con React Docs :
Se dispara sincrónicamente antes de todas las mutaciones DOM. Use esto para inyectar estilos en el DOM antes de leer el diseño en useLayoutEffect . Entonces se ejecuta antes useLayoutEffect .
Se dispara sincrónicamente después de todas las mutaciones DOM. Úselo para leer el diseño del DOM y volver a renderizar sincrónicamente.
Se ejecutará después de que el renderizado se confirme en la pantalla. Entonces se ejecuta después de useLayoutEffect .
Por lo tanto, el orden de ejecución es: