Optimize Re-Renders with shouldComponentUpdate

Optimize Re-Renders with shouldComponentUpdate
0

#1

Tell us what’s happening:

I’m getting this message but I’m not sure why:

OnlyEvens should re-render only when nextProps.value is even.

Thought using modulo would do this, what am I missing?

Your code so far


class OnlyEvens extends React.Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Should I update?');
     // change code below this line
     if (nextState % 2 == 0){
    return true;
     }
     // change code above this line
  }
  componentWillReceiveProps(nextProps) {
    console.log('Receiving new props...');
  }
  componentDidUpdate() {
    console.log('Component re-rendered.');
  }
  render() {
    return <h1>{this.props.value}</h1>
  }
};

class Controller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
    this.addValue = this.addValue.bind(this);
  }
  addValue() {
    this.setState({
      value: this.state.value + 1
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.addValue}>Add</button>
        <OnlyEvens value={this.state.value}/>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate


#2

If you take a look at your question:

and then your code:

then you might able to see one problem. You are also going to a return false if the component should not render.

Hope this helps without just giving you the answer :slight_smile:


#3

ok thanks got it now, this is working:

if (nextProps.value % 2 == 0){
    return true;
     }

So obvious now I’ve got it!

it passes with and without adding in the else btw but maybe best to keep it in for clarity

Cheers for the help :slight_smile:


#4

If you want to use even less lines of code, you could also do:

return nextProps.value  % 2 == 0;

#5

Hey, I have completed the challenge long back without any help but I forgot the solution.

Anyhow my question is, the above solution solves the challenge but when you close the popup and try clicking the add button it completely disappears.

If I am not wrong clicking the button should show 2, 4, 8…


#6

It does this for me to, but it also does it for the default code.


#7

The button and 0 disappear for me after I click ‘Add’. Shouldn’t I see 2,4,6, etc ?
I disabled the popup blockers and restarted the chrome browser. I even tried it on my IE. Hmm.


#8

Same for me have you gotten any updates on this? The html just disappears for me.


#9

So when you run the tests, you get the success dialogue box and then you click the Add button and the html disappears?


#10

Correct, i pass the test but cant actually see results. I’m assuming the first result is 1 which would be false here so it doesnt render anything for some reason.


#11

When I solve the challenge, I can click on the Add button one time and it still will display 0, which is correct. The second time I click add, it will display a 2. The third time Add is clicked, the 2 still displays, and the fourth time Add is clicked, I see a 4 displayed. If you are not, can you post your code for review? Also, are you using Chrome?


#12

> class OnlyEvens extends React.Component {
>   constructor(props) {
>     super(props);
>   }
>   shouldComponentUpdate(nextProps, nextState) {
>     console.log('Should I update?');
>      // change code below this line
>     return true;
>      // change code above this line
>   }
>   componentWillReceiveProps(nextProps) {
>     console.log('Receiving new props...');
>   }
>   componentDidUpdate() {
>     console.log('Component re-rendered.');
>   }
>   render() {
>     return <h1>{this.props.value}</h1>
>   }
> };
> 
> class Controller extends React.Component {
>   constructor(props) {
>     super(props);
>     this.state = {
>       value: 0
>     };
>     this.addValue = this.addValue.bind(this);
>   }
>   addValue() {
>     this.setState({
>       value: this.state.value + 1
>     });
>   }
>   render() {
>     return (
>       <div>
>         <button onClick={this.addValue}>Add</button>
>         <OnlyEvens value={this.state.value}/>
>       </div>
>     );
>   }
> };

Yes i am using Chrome.


#13

Can you edit your last post and paste your code in and put 3 backticks on a separate line before the pasted code and 3 backticks on a separate line after your pasted code, so that it properly formats on the forum?

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#14

When I run the code you just posted, it does not pass the final test. It does not, because your code does not consider deal with the instruction task of only updating the OnlyEvens component when the value of it’s new props is even.


#15

I actually pasted the wrong code here is the correct code i used sorry.

class OnlyEvens extends React.Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Should I update?');
     // change code below this line
   if(nextProps.value % 2 === 0){
     return true;
   }
   return false;
     // change code above this line
  }
  componentWillReceiveProps(nextProps) {
    console.log('Receiving new props...');
  }
  componentDidUpdate() {
    console.log('Component re-rendered.');
  }
  render() {
    return <h1>{this.props.value}</h1>
  }
};

class Controller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
    this.addValue = this.addValue.bind(this);
  }
  addValue() {
    this.setState({
      value: this.state.value + 1
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.addValue}>Add</button>
        <OnlyEvens value={this.state.value}/>
      </div>
    );
  }
};

#16

When I run your code, it passes the tests as you said and I am able to click the Add button and get an even number to display every two clicks as it should.


#19

I think cleaner code can be written with this:

shouldComponentUpdate(nextProps, nextState) {
    console.log('Should I update?');
     // change code below this line
    return nextProps.value % 2 === 0;
     // change code above this line
  }

Now realized, @oliverdudman already showed this approach.