PerfClicksButton.class.jsx

class PerfClicksButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
    };
  }
  shouldComponentUpdate(nextProps, nextState) {
    const sameClassName = nextProps.className === this.props.className;
    const sameStyle = nextProps.style === this.props.style;
    const sameChildren = nextProps.children === this.props.children;
    const sameClicks = nextState.clicks === this.state.clicks;
    if (sameClassName && sameStyle && sameChildren && sameClicks) {
      return false;
    }
    return true;
  }
  handleClick = () => {
    this.setState(({ clicks }) => ({
      clicks: clicks + 1,
    }));
  };
  render() {
    const { className, style, children } = this.props;
    const { clicks } = this.state;
    return (
      <button
        className={clsx('ClicksButton', className)}
        style={style}
        onClick={this.handleClick}
      >
        {children} {clicks}
      </button>
    );
  }
}