Create-react-app: App rendered twice on development environment

[mramadhanrh]

Describe the bug

App rendered twice after applying hook, when I try console.log to check App re-render without hook and the console just logging App Rendered once which is normal, but when I tried using hook the console logging App rendered twice. and I am using the fresh create-react-app project.

I try with template typescript, but the result is the same, and this problem only shown at the development mode

Environment

System:
OS: Linux 4.4 Ubuntu 20.04 LTS (Focal Fossa)
CPU: (8) x64 AMD Ryzen 5 2500U with Radeon Vega Mobile Gfx
Binaries:
Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
Yarn: Not Found
npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
react: ^16.13.1 => 16.13.1
react-dom: ^16.13.1 => 16.13.1
react-scripts: 3.4.1 => 3.4.1
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. npx create-react-app PROJECT_NAME
2. Add 1 hook either it useState, useEffect, or useMemo
3. Log outside return component

the final code might look like this for example:

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);
  console.log("App Rendered");

  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;

Expected behavior

I expect 'App rendered' to be logged just once, but it twice

Actual behavior

It logged twice after applying hook

With applying hook:

Without applying hook:

Reproducible demo

https://github.com/mramadhanrh/cra-app-render-bug
I also have deployed the project but it only logs once because it's on the production environment, here's the link: https://cra-render-bug-demo.now.sh/

[sudkumar]

@mramadhanrh

The docs might help. Detecting unexpected side effects

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

• Class component constructor, render, and shouldComponentUpdate methods
• Class component static getDerivedStateFromProps method
• Function component bodies
• State updater functions (the first argument to setState)
  

  - Functions passed to useState, useMemo, or useReducer

Note:
This only applies to development mode. Lifecycles will not be double-invoked in production mode.

[mramadhanrh]

@mramadhanrh

The docs might help. Detecting unexpected side effects

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

• Class component constructor, render, and shouldComponentUpdate methods
• Class component static getDerivedStateFromProps method
• Function component bodies
• State updater functions (the first argument to setState)
• Functions passed to useState, useMemo, or useReducer

Note:
This only applies to development mode. Lifecycles will not be double-invoked in production mode.

Ohh, I see, sorry then if I am reporting this as a bug, I truly didn't know that. Thank you very much @sudkumar

[sudkumar]

Glad it helped. 🍻