Wrap a component with a shouldComponentUpdate call

withShouldComponentUpdate.js

import React, { Component, Fragment } from 'react';

export const withShouldComponentUpdate = (WrappedComponent, func) => {
  class WithShouldComponentUpdate extends Component {
    displayName = `WithShouldComponentUpdate(${getDisplayName(
      WrappedComponent,
    )})`;
    shouldComponentUpdate = (nextProps, nextState) =>
      func.call(this, nextProps, nextState);
    render = () => (
      <Fragment>
        <WrappedComponent {...this.props} />
      </Fragment>
    );
  }

  WithShouldComponentUpdate.displayName = `WithShouldComponentUpdate(${getDisplayName(
    WrappedComponent,
  )})`;
  return WithShouldComponentUpdate;
};

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

It's useful for e.g. simple cases with styled-components to avoid having the component render every time

const StyledTitle = withShouldComponentUpdate(
    styled.h2`
        font-size: 18px;
    `,
    (nextProps, nextState) => false,
);

// <StyledTitle>Foo bar</StyledTitle>