Why does the render function in react is called twice when using the component strategy?

Question

I am new to react and what to understand why the console.log is called twice when inside of the render function ?

import React, { Component } from "react";
import "./App.css";

class App extends Component {

  render() {
    console.log("Prints twice in console");
    return (
      <div className="App">

      </div>
    );
  }
}

export default App;

Where as if i dont extend from component and use function instead the console prints only once

import React from "react";
import "./App.css";
function App() {
  console.log("prints once");
  return <div className="App"></div>;
}

export default App;

Answer 1

Check your index.js in the ./src directory. I think it renders the App component in

<React.StrictMode>

Remove it and it will stop rendering the function twice.

Also you can check This