Default implementation of shouldComponentUnpdate

December 13, 2017

tl;dr

According to React documentation

It just returns true

You can also see it in the source code (react 16.2.0)

When it’s PureComponent it does shallow equals

if (type.prototype && type.prototype.isPureReactComponent) {
      return (
        !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
      );
    }

Example:

codepen.io

Consider following code:

class Hello extends React.Component {
  render(){
    const {name, handleOnClick} = this.props
    console.log('rendered Hello')
    return (<div>
        hello {name}
        <button onClick={handleOnClick}> Test </button>
      </div>)
  }
}

class App extends React.Component {
          constructor(props){
            super(props);
            const afunction = function(){
              console.log('clicked');
            }
            this.a = afunction;  // yes they are referring to same function
            this.b = afunction;  // yes they are referring to same function
            this.state = {
              selected: this.a
            }
            this.changeSelected = this.changeSelected.bind(this);
          }

          changeSelected() {
            this.setState({
              selected: this.b
            })
          }

          render() {
            console.log('rendered app')
            return(
              <div>
                <Hello name="World" handleOnClick={this.state.selected} />
                <button onClick={this.changeSelected}>Swap function</button>
              </div>
            );

          }
        }

The output log rendered app rendered Hello Everytime you press “Swap function” button, the render function is called even the props hasn’t changed.

However if you change the Hello component to extends to React.PureComponent Pression “Swap function” will not call Hello component’s render function.

But, don’t think it’s an easy optimization!! you have to be specially careful rolling your own shouldComponentUpdate!! read this awesome post first please Shoul I use ShouldComponentUpdate?


©Yichao 2018.