Where is render() being held back in shouldComponentUpdate

Where is render() being held back in shouldComponentUpdate
0

#1

Tell us what’s happening:

I have working code and I passed the challenge but I wish to understand what is happening to render() and shouldComponentUpdate().

My understanding so far. Please correct if mistaken:

The shouldComponentUpdate() should execute every time the Add button is pressed as value changes since this is updated in the props

*Question is here: Is this what is holding render() back if false?

componentWillReceiveProps(nextProps) executes every time button pressed

componentWillUpate() only executes on even value

render() renders even props

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
    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_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

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


#2

Yes, if shouldComponentUpdate returns true then render will fire. If it returns false, then render will not run. You need logic that will return true if nextProps.value is even and false if it is not.


#3

Great, thanks ---------