Отправка избыточного действия перед рендерингом с реагирующими хуками

Question

Итак, как гласит заголовок: как мы можем отправить действие приращения перед рендерингом компонента?

У меня есть конкретный случай, когда мне нужно очистить часть общего состояния перед рендерингом компонента (в этом случае показывается «загрузка ... »), которая выполняется с помощью диспетчерского действия с избыточностью.

Теперь, если я отправляю его с помощью useEffect, я получаю мерцание первых показанных устаревших / старых данных и затем показывает« загрузка ... ».

Пока что я вижу 2 способа ее решения:

1. useLayoutEffect - мне нравится, но не уверен, что это хорошая практика
2. переопределить модель редукции -что я хотел бы избежать, плюс это звучит немного странно

Я мог бы создать собственный Fetcher хук, но разве это не возвращает его в царство адов / оболочек?

Я просто хочу сделать что-то перед первым рендерингом.

Answer 1

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

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

Если мерцание - единственная проблема с useEffect и оно исчезает с useLayoutEffect, то следует использовать последнее.