Extra rendering components

1


Here is my code;

I have added console.log("Props", this.props); in Counter.jsx component at line 22

The output render is as below

Props -> Object {value: 4, selected: true}
Props -> Object {value: 4, selected: true}
Props -> Object {value: 0, selected: true}
Props -> Object {value: 0, selected: true}
Props -> Object {value: 0, selected: true}
Props -> Object {value: 0, selected: true}
Props -> Object {value: 0, selected: true}
Props -> Object {value: 0, selected: true}
​

There is extra rendering happening , why ??
Expected output on console is

Props -> Object {value: 4, selected: true}
Props -> Object {value: 0, selected: true}
Props -> Object {value: 0, selected: true}
Props -> Object {value: 0, selected: true}
2

Hello there.

Just as a tip: Generally, class components require a constructor like so:

constructor(props) {
    super(props)
    this.state = {
      count: this.props.value
    };
  }

Also, you have this:

handleInc = product => {
    console.log(product);
    this.setState({
      count: this.state.count + 1
    });
  };

That is where you are getting extra “renders”.

Hope this helps

1 Like