Порядок вывода в консоль React.StrictMode?

Question

[absolemDev]

import React from "react";
import ReactDOM from "react-dom/client";

const C1 = () => {
  console.log("1");

  React.useEffect(() => {
    console.log("2");
  }, []);

  return <div> YOWZ </div>;
};

const C2 = () => {
  console.log("3");

  React.useEffect(() => {
    console.log("4");
  }, []);

  return <div> YOWZ </div>;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <C1 />
    <C2 />
  </React.StrictMode>
);

Вывод в консоль: 1 1 3 3 2 4 2 4
Почему именно такой порядок?

Comments

[szQocks]

про вот этот порядок 1 1 3 3 - тут могу ошибаться, но мне кажется что он тут тупо проверяет на то валидный ли компонент, типа верное ли значение компонент возвращает, а про 2 4 2 4 , первая двойка и первая четверка , это строгий режим запускает useEffect синхронно для проверки всего того что там у тебя написано, в основном он это делает что бы проверить функции очистки, порядок такой потому что с1 находиться первым, на одном уровне с c2, то есть и монтировать он будет первым

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

[WbICHA]

szQocks,

мне кажется что он тут тупо проверяет на то валидный ли компонент

Разве тут причина не в том, что сначала рендерится первый компонент, а потом второй?

это строгий режим запускает useEffect синхронно для проверки всего того что там у тебя написано

Разве там не очередь под капотом?

[szQocks]

WbICHA,

Разве там не очередь под капотом?

- фиг знает) сначала синхронная очередь проверки юзэффектов, а потом асинхронная ( уже их выполнение )

[szQocks]

WbICHA, но в принципе можно это всё узнать, разобраться в этом если покопаться в исходниках + доку перечитать, правда профита в этом вообще не вижу ( ну типа узнаешь ты как стрикт моде проверяет то или другое, и чё толку от этого ), поэтому и не занимался этим, главное что реакт хоть что-то проверяет за нас

[szQocks]

WbICHA,

Разве тут причина не в том, что сначала рендерится первый компонент, а потом второй?

, в доке написано что он вызывает метод render дважды для каждого компонента ( это видимо то про что я и написал, проверят верно ли значение возвращает компонент ) 11 - первый компонент, 33 - второй компонент ( а как мы знает при обновлении компонента, при вызове методы render, функции создаются заного, поэтому консоль логи дважды вызываются ( первый который относится к проверке, второй который относится к основному рендеру ) которые находятся в основном скоупе компонентов в каждом из компонентов

потом проверяет юзэффекты, а потом эти юзэффекты отрабатывают

[WbICHA]

szQocks, ну, проверка не вызывает код сам по себе, там ключевое именно в вызове рендера и эффектов дважды. Я глянул исходники сейчас, там эффекты через componentUpdateQueue проходят.
Но копаться в реакте тот ещё гемор, чёрт ногу сломит, плюс он ещё и на flow.

ну типа узнаешь ты как стрикт моде проверяет то или другое, и чё толку от этого

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

[szQocks]

WbICHA,

вызове рендера и эффектов дважды

- да, типа монтирование компонента вызывает дополнительное, хотя написано что вызывает тупо рендер допольнительный

всё что там есть в компонентах кроме useEffect и useLayoutEffect, если например объявить useState(() => console.log('test')) - то отработает дважды этот лог, на счёт этого я точно копаться в исходниках не буду, да и в целом мне этой инфы хватает что бы примерно понимать как эта шляпа работает, там типа этот строгий режим проверяет компоненты из нескольких фаз, первая относится к проверке компонента типа как на чистую функцию, в доке написано

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

Ну почему? Толк есть, потенциально, на случай уникальных багов

- ну надеюсь у меня таких не будет "уникальных багов", а если и будет - то мне не привыкать, я уже столько граблей насобирал, что привык

и кстати странно что автор вопроса молчит, хоть бы сказал чё вообще думает о моих мыслях, я ж для него писал изначально комменты свои)

[WbICHA]

szQocks,

и кстати странно что автор вопроса молчит, хоть бы сказал чё вообще думает о моих мыслях, я ж для него писал изначально комменты свои)