Why is console.log logging twice in react js?

Question

I have started learning React and I am not able to understand why is the console.log logging twice. Below is my code and when I inspect it in chrome it shows the word 'random-text' twice instead of once.

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0

  };



  render() {
    console.log('random-text');

    return (
      <div>
        <span className={this.getBaadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={this.handleIncrement}
          className="btn btn-success m-2"
        >
          Increment
        </button>

        {/* <ul>
          {this.state.tags.map((tag) => (
            <li key={tag}>{tag}</li>
          ))}
        </ul> */}
      </div>
    );
  }

  getBaadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }

  handleIncrement = () => {
    this.setState({count: this.state.count + 1})
  }

}

export default Counter;

I believe it's happening because you are calling getBaadgeClasses inside the render method, causing the component to re-render. Try removing this call and see what you get. — David G
– David G, Commented Jun 4, 2020 at 1:46
render method is in react's lifecycle. it'll be triggered when your component's props or state changed. — Narro
– Narro, Commented Jun 4, 2020 at 1:47
@DavidG I tried removing the getBadgeClasses inside the render method but it still logged twice.. Infact even with an empty div in render it logged twice.... — HBK8396
– HBK8396, Commented Jun 4, 2020 at 13:36

Drew Reese · Accepted Answer · 2020-06-04 15:53:43Z

49

The render function is a lifecycle function, called during the "render phase"

react lifecycle methods diagram

Notice that these functions are pure functions, and can be paused, aborted, or restarted by React. This means react can call render almost any number of times to reconcile the virtualDOM with the actual DOM.

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.

If you truly want a one-to-one console log when the component updates use one of the other lifecycle functions, like componentDidUpdate to do the side-effect of logging details.

class Counter extends Component {
  state = {
    count: 0
  };

  componentDidUpdate() {
    console.log("random-text");
  }

  render() {
    return (
      <div>
        <span className={this.getBaadgeClasses()}>{this.formatCount()}</span>
        <button onClick={this.handleIncrement} className="btn btn-success m-2">
          Increment
        </button>

        {/* <ul>
          {this.state.tags.map((tag) => (
            <li key={tag}>{tag}</li>
          ))}
        </ul> */}
      </div>
    );
  }

  getBaadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };
}

edited Jun 4, 2020 at 15:53

answered Jun 4, 2020 at 2:37

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

HBK8396 Over a year ago

Thank you very much for you answer. My doubt is will the react re-render even if there is no change in the state and props? Even with an empty div, the react is logging it twice. Why is this happening? I am a beginner so please excuse if the doubt sounds silly.

Drew Reese Over a year ago

@HBK8396 I believe you are conflating the react framework invoking the render function (to compute a diff) with it committing anything to the DOM. Read the description of the "commit phase": "Can work with DOM, run side effects, schedule updates" and look at the lifecycle functions where you can do this. React traverses the entire virtualDOM tree and invokes render on every component, then it compares the output, then commits the diff. Even a component that renders static output (or null even) will have its render function invoked during reconciliation.

HBK8396 Over a year ago

I understand it now sir. Everything is quite clear and thank you very much.

Pouria Moosavi Over a year ago

This answer is good, for more information this would help: reactjs.org/docs/strict-mode.html

Florian Motteau · Accepted Answer · 2022-09-12 12:47:27Z

37

When you create this project, this project enables Strict Mode automatically. So, To solve this problem firstly open index.js file in your project and then disable strict mode.

Step 1: when you open index.js file then you will see something like this,

root.render(
   <React.StrictMode>
    <App />
   </React.StrictMode>
);

Step2: Now do this,

root.render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);

I hope this will help you. Thank You

edited Sep 12, 2022 at 12:47

Florian Motteau

3,7241 gold badge27 silver badges43 bronze badges

answered Sep 5, 2022 at 22:25

Tanvir Hasan

3613 silver badges2 bronze badges

3 Comments

tim-phillips Over a year ago

Don't turn off strict mode. Strict Mode calls some of your functions twice in development for good reasons: react.dev/reference/react/…

Eric Over a year ago

@tim-phillips so we should get used to see 2 times in console? what if we call console.log function multiple times, then there will be mess.

tim-phillips Over a year ago

Yes, and that’s ok

dave4jr · Accepted Answer · 2022-11-21 00:29:21Z

The React team is no longer silencing console methods during the double render in Strict Mode. If you do not want to remove Strict Mode, like @Florian Motteau mentions, then you can go into React Dev Tools and check the box Hide logs during second render in Strict Mode. See screenshot below:

Here is the quote from the React Team, as well as the link to the discussion on their Github page.

In Strict Mode, React double invokes render methods in order to flush out potential side effects. During the second render, React used to automatically silence console methods (ex. console.log() and console.warn()) to reduce the noise of multiple repeat logs. However, this ended up causing a lot of confusion for developers during debugging, so we are changing this behavior. - React Team

Collectives™ on Stack Overflow

Why is console.log logging twice in react js?

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related