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
– Manoj, Commented Mar 23, 2020 at 17:31
It is normal and so designed. Does this answer your question? stackoverflow.com/questions/48846289/… — keikai
– keikai, Commented Mar 23, 2020 at 17:34

Manoj · Accepted Answer · 2020-03-24 05:21:07Z

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, 2020 at 5:21

Manoj

2,0933 gold badges14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Md. Abutaleb Over a year ago

I also got the same problem and it works as your solution. upvote.

Unanimous 85 · Accepted Answer · 2020-05-14 06:21:43Z

4

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

answered May 14, 2020 at 6:21

Unanimous 85

414 bronze badges

Comments

Mehmet Efe Akça · Accepted Answer · 2020-07-11 17:51:02Z

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.

Collectives™ on Stack Overflow

Constructor and render methods run twice in react component

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related