React default create-react-app App component rendered twice

Question

I started new React project via the command:

npx create-react-app my-app --template typescript

Then, I changed the App component to look like that:

import * as React from 'react';

export default class App extends React.Component<{}> {
  public render() {
    console.log("App Rendered");
    return (
      <div>
        Hello World
      </div>
    );
  }
}

and when I watch the Console log ( both in Google Chrome and Microsoft Edge ) I receive this messages:

[HMR] Waiting for update signal from WDS...
App Rendered
App Rendered

My Questions:
Why the App render is being called twice?
How to remove the first message with that WDS?

This is my package.json ( default one as I ran create-react-app ):

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Why do you want to disable any of the messages? What's the problem you're trying to solve? — jonrsharpe
– jonrsharpe, Commented Apr 13, 2020 at 17:26
It is not normal that the App component is being rendered twice, why it's happen? — Dorki
– Dorki, Commented Apr 13, 2020 at 17:26

Jackyef · Accepted Answer · 2020-04-13 17:34:37Z

16

When wrapped with React.StrictMode (which is how CRA template are setup), on development, renders will be called twice. This is done to catch bugs that might occurs when some setState functions are not pure. You can read this for more detail.

answered Apr 13, 2020 at 17:34

Jackyef

5,0421 gold badge21 silver badges26 bronze badges

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

2 Comments

Dorki Over a year ago

To be fair I submitted @Kirill 's answer since he answered first, but thanks for the information, I am sure it will be useful to others as well.

Robin Daugherty Over a year ago

@Dorki since this answer actually answers the question, it would make more sense to make it the accepted answer.

Kirill Skomarovskiy · Accepted Answer · 2020-04-13 17:32:31Z

3

Remove React.StrictMode from src/index.tsx

answered Apr 13, 2020 at 17:32

Kirill Skomarovskiy

1,5751 gold badge9 silver badges10 bronze badges

Collectives™ on Stack Overflow

React default create-react-app App component rendered twice

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related