freeCodeCamp Challenge Guide: Optimize Re-Renders with shouldComponentUpdate

Guide
1

Optimize Re-Renders with shouldComponentUpdate

Hints

Hint 1

Check to see if the value of nextProps is even.

Solutions

Solution 1 (Click to Show/Hide) For this solution, you will use an ```if/then``` statement to check whether the value of ```nextProps``` is even. ```nextProps``` differs from ```props``` in that it is a value that has not been rendered in the UI yet so in the ```shouldComponentUpdate()``` method, you are essentially asking permission to update the UI with the ```nextProps``` value. 
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>
    );
  }
};
29 Likes