Вариации хука useEffect в React

У хука useEffect есть еще вариации, которые специфичны и очень редко используются, поэтому мы остановимся на них кратко.

Первая вариация - это хук useLayoutEffect, который срабатывает до того, как браузер перерисует экран. Эту возможность вы можете использовать, чтобы вычислить размеры и позицию компонента взависимости от других элементов, чтобы затем при прорисовке браузер отобразил его сразу как и где нужно. Благодаря этому, к примеру, пользователь не увидит промежуточных перескоков компонента при измении положения или размеров, а только их финальные версии.

Вторая вариация - это хук useInsertionEffect, который срабатывает перед какими либо изменениями DOM дерева, то есть тогда, когда ещерефы не прикреплены и DOM не обновлен. Применяется в основном там, где нужно вставить динамические стили изCSS-in-JS библиотек до изменения DOM.