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

Answer 1

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.