Variations of the useEffect hook in React

The useEffect hook has other variations that are specific and very rarely used, so we'll cover them briefly.

The first variation is the useLayoutEffect hook, which fires before the browser redraws the screen. You can use this feature to calculate the size and position of a component depending on other elements, so that when the browser draws it, it will be displayed immediately as and where it should be. Thanks to this, for example, the user will not see intermediate jumps of the component when changing its position or size, but only their final versions.

The second variation is the useInsertionEffect hook, which fires before any changes to the DOM tree, that is, when the refs are not attached yet and the DOM has not been updated. It is mainly used where dynamic styles from CSS-in-JS libraries need to be inserted before the DOM changes.