REACT : all method in class are run 2 time

Question

Firstly sorry if my English is not perfect, i learn :x

I have a problem withe react, all my components is run two time, for example if i write "console.log('test');" in the render function, so i see "test" two time in the console...

just for specify, i don't have this problem when i use a function for a component and in class all default methods (constructor, render, componentDidMount, ... ) is run two time when the components is create or modify (not destruct the componentWillUnmount is been run one time).

the problem is not from my code, i tried to create a new app (with create-react-app) and change function by a class but the result it's the same (even on a other computer)

the only file i have change after create the project (i have change only line 1, line 5 and line 7):

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    console.log('test');
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
        </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
        </a>
        </header>
      </div>
    );
  }

}

export default App;

I specify too, i have already read that react prefer function now, class is depreciated, but i learn currently react and i like explore all possibility :)

Thanks for your help ;) and sorry again for my English :x

Edite :

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor() {
    super()
    console.log("test")
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
        </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
        </a>
        </header>
      </div>
    );
  }

}

export default App;

In this case console.log() is run two time too, but the constructor is not run when we do an update so it's not that the problem

Answer 1

First of all, you should understand the usage of React lifecycle methods such as render(), componentDidMount().

The render() method is called whenever state changes, when you run setState() method render() method will be triggered again. So render() is the method which is customizing your UI continually according to the application state. You can't control the method to run only once since you need to re-generate the UI frequently. You have to refer to the stateful and stateless components in React.

Stateless components will be generated once and cannot change the state unless you re-create the component.

Source

The reason for the stateful component render() method is triggered two times. You have to understand React Virtual DOM which React initially renders the changes in virtual DOM and identify the specific changes effected then it renders only the changed UI in a real DOM.

Updating the browser’s DOM is a three-step process in React.

1. Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.

2. The difference between the previous Virtual DOM representation and the new one will be calculated.

3. The real DOM will be updated with what has actually changed. This is very much like applying a patch.

Literally the render method will be called in virtual DOM and real DOM in stateful components. Write only the UI logics in the render() method do not write functional logics such as sending HTTP requests, you can write those into componentDidMount() method.

Refer the explanation Stateful vs Stateless