Why is the react component is rendering twice without changing the state?

Question

First i added logs in the console for every life cycle hooks

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>;
  }
}

After then, on the console every methods until componentDidMount are being called twice without updating the state.

These are the console messages

i only have one CircleA component and it was rendered only once — , Apr 19 '20 at 15:58

score 0 · Answer 1 · answered Apr 19 '20 at 15:59

This might be because of React.StrictMode. React can call render phase methods multiple times for detecting side-effects. You may want to check the index.js file or the main file where you are using ReactDOM.render to check whether you have a wrapper called React.StrictMode.

Here are the docs on same: https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

Hope this Helps!

Why is the react component is rendering twice without changing the state?

1 Answers1