Да да… Я использовал этот непонятый хук.
Давайте упростим.

Разница между useLayoutEffect и useEffect заключается в том, когда выполняется каждый хук.

Жизненный цикл React:

  1. Изменения состояния в ответ на взаимодействие пользователя с пользовательским интерфейсом.
  2. useLayoutEffect выполняется.
  3. Браузер рисует изменение, то есть пользователь видит измененный пользовательский интерфейс.
  4. useEffect выполняется.

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

Когда вы должны предпочесть useLayoutEffect?

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

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

Авария:

  • Нажатие на кнопку click вернет состояние в исходное состояние.

В реальном примере я не нажал кнопку для инициализации состояния, компонент размонтировался, а затем снова смонтировался, что привело к повторной инициализации состояния и Пользовательский интерфейс мерцает.

  • Если состояние равно начальному, то текст не показываем: The number is: [number].
{displayedNumber && <div> The number is: {displayedNumber}</div>}

Это линия, которая вызывает мерцание. потому что в то же время мы обновляем состояние displayedNumber, чтобы оно равнялось числу (в useEffect).
Таким образом, у нас есть быстрое удаление текста и его возврат, из-за чего UI мерцает.

При использовании useEffect пользовательский интерфейс мерцает, потому что это происходит после рисования браузером.

При использовании useLayoutEffect у нас нет мерцания пользовательского интерфейса, поскольку оно происходит до отрисовки браузером.