Как React измеряет элементы DOM в useLayoutEffect правильно, прежде чем браузер получит возможность рисовать?

Question

В официальных документах React для useLayoutEffect упоминается: Подпись идентична useEffect, но она запускается синхронно после всех мутаций DOM. Используйте это для чтения макета из DOM и синхронного повторного рендеринга. Обновления, запланированные внутри useLayoutEffect, будут сбрасываться синхронно до того, как браузер сможет рисовать.

Кроме того, в useLayoutEffect мы можем прочитать обновленные измерения до того, как браузер на самом деле перерисовает.

Как реагирует это сделать?

Answer 1

Если я не ошибаюсь, это работает примерно так:

1. Вы нажимаете кнопку, которая обновляет счетчик (например).
2. Реагирует на обновление состояния счетчика.
3. Реагирует на обновление DOM (браузер еще не отобразил его!).
4. Браузер отображает изменение.

Обратный вызов useLayoutEffect будет запущен между шагами 3 и 4.