React

HTML

<div id="app"></div>

CSS

p { border: 1px solid red }

React

const { Component, PureComponent } = React;
class App extends Component {
  state = { value: 1 };
  
  onClick = event => this.setState(state => {
  	return { value: state.value + 1 };
  });
  
  render() {
    return (
      <div>
        <ComponentChild />
        <PureComponentChild />
        <PureComponentChild prop={ this.state } />
        <button onClick={ this.onClick }>
        Update Parent
        </button>
      </div>
    )
  }
}
  
class ComponentChild extends Component {
  renderCount = 0;
  render () {
    this.renderCount++;
    return <p>
      ComponentChild:
      <br/>
      Render count: {this.renderCount}
    </p>;
  }
}

class PureComponentChild extends PureComponent {
  renderCount = 0;
  render () {
    this.renderCount++;
    return <p>
      PureComponentChild
      { this.props.prop && ' (with prop)' }:
      <br/>
      Render count: {this.renderCount}
    </p>;
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))