Каков порядок вывода в консоль при использовании React.StrictMode?

Почему порядок вывода консоли такой: 1 1 3 3 2 4 2 4 при использовании `React.StrictMode` в React?
  • 16 марта 2024 г. 16:09
Ответы на вопрос 2
React.StrictMode запускает компоненты дважды, что может привести к повторным вызовам не чистых функций и других побочных эффектов. При этом порядок вывода в консоль может быть неопределенным.

1. При первом проходе компоненты выводится "1", затем компонента запускается повторно и выводится "1" второй раз. Это объясняет появление двух "1" в выводе.

2. Далее компонента выводит "3" и снова запускается повторно, в результате чего "3" выводится два раза.

3. После этого компонента выводит "2" и снова запускается повторно, что приводит к выводу "2" дважды.

4. Наконец, компонента выводит "4", затем запускается повторно и выводит "4" еще раз.

Таким образом, порядок вывода консоли зависит от внутренних механизмов React.StrictMode, и может быть неопределенным и меняться между разными запусками приложения.
Чтобы понять, почему все цифры выводятся 2 раза, достаточно почитать про строгий режим в реакте, чтобы понять порядок их вывода, нужно почитать как работает реакт под капотом, про механизм приоритизации выполняемых действий, вот, например, видео, где это частично затрагивают: https://www.youtube.com/watch?v=SEEt6F87RBs
Похожие вопросы