CODEWITHSUNDEEP
reactjs
Dorki
Dorki

Reputation: 1207

React default create-react-app App component rendered twice

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"
    ]
  }
}

Upvotes: 2

Views: 2470

Answers (2)

Jackyef
Jackyef

Reputation: 5012

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.

Upvotes: 16

Kirill Skomarovskiy
Kirill Skomarovskiy

Reputation: 1565

Remove React.StrictMode from src/index.tsx

Upvotes: 3

Related Questions