Почему компонент реагирует на рендеринг дважды без изменения состояния?

Question

Сначала я добавил журналы в консоли для каждого перехвата жизненного цикла

class CircleA extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "Circle",
    };
    console.log("Circle-A constructor");
  }

  static getDerivedStateFromProps(props, state) {
    console.log("Circle-A getDeriveStateFromProps Method");
    return null;
  }

  componentDidMount() {
    console.log("Circle-A componentDidMount Method");
  }

  render() {
    console.log("Circle-A render method");
    return <div>Circle-A</div>;
  }
}

После этого в консоли все методы до componentDidMount вызываются дважды без обновления состояния.

Это сообщения консоли

Answer 1

Это может быть из-за React.StrictMode. React может вызывать методы фазы рендеринга несколько раз для обнаружения побочных эффектов. Вы можете проверить файл index. js или основной файл, в котором вы используете ReactDOM.render, чтобы проверить, есть ли у вас обертка с именем React.StrictMode.

Вот документы на том же: https://reactjs.org/docs/strict-mode.html#detecting -неожиданные побочные эффекты

Надеюсь, это поможет!