Constructor and render methods run twice in react component

Question

I have created a react project and added constructor and render menthod to it, while running it I was expecting both constructor and render run once only, but both are running twice. First constructor is running twice and then render. Can someone please help, same was happening to other life cycle methods with me.


import React, {Component} from 'react';
class App extends Component {
  constructor(props) {
    super(props)
    console.log('Constructor')
  }

  render() {
    console.log('render')
    return (
      <h1>My Favorite Color is </h1>
    );
  }
}
export default App;

Here is my index.js.. for how it is called


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

It is default way, I have done these changes only after creating a project using npx create-react-app.... — Manoj, Mar 23 '20 at 17:31
It is normal and so designed. Does this answer your question? https://stackoverflow.com/questions/48846289/why-is-my-react-component-is-rendering-twice — keikai, Mar 23 '20 at 17:34
Unfortunately not, I have no state and prop in this component, even constructor is called twice, not only render method.. see the sequence of console log — Manoj, Mar 23 '20 at 17:40

score 8 · Accepted Answer · answered Mar 24 '20 at 05:21

8

It works for me, if I replace below code

ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  )

by below line (but the above code is the one I got as default code on creating a project using create-react-app command.

ReactDOM.render(<App />, document.getElementById('root'));

answered Mar 24 '20 at 05:21

Manoj

2,059
3
12
24

I also got the same problem and it works as your solution. upvote. – Md. Abutaleb Mar 28 '20 at 07:32

score 4 · Answer 2 · answered May 14 '20 at 06:21

4

I had the same problem and just removed React.StrictMode and now everything renders only once.

answered May 14 '20 at 06:21

Unanimous 85

41
4

score 2 · Answer 3 · answered Jul 11 '20 at 17:51

Actually this is the intended behavior of StrictMode as documented in the React Docs. It is explained in the docs that React has two phases, namely render and commit. In the future, Concurrent Mode will try to avoid blocking the browser thread by stopping and replaying some lifecycle functions like render, constructor, and more. Strict mode has this feature and it replays these lifecycle methods.

React Docs also say that these lifecycle functions should NOT contain any side-effects. Having side effects will cause memory leaks and invalid application state.

My personal opinion is that you should keep all the side-effects to safe lifecycle functions as described in the docs. Link to the specific section of the docs that explain this.

Constructor and render methods run twice in react component

3 Answers3