Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Wrap a component with a shouldComponentUpdate call
import React, { Component, Fragment } from 'react';
export const withShouldComponentUpdate = (WrappedComponent, func) => {
class WithShouldComponentUpdate extends Component {
displayName = `WithShouldComponentUpdate(${getDisplayName(
shouldComponentUpdate = (nextProps, nextState) =>, nextProps, nextState);
render = () => (
<WrappedComponent {...this.props} />
WithShouldComponentUpdate.displayName = `WithShouldComponentUpdate(${getDisplayName(
return WithShouldComponentUpdate;
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || || 'Component';

This comment has been minimized.

Copy link
Owner Author

riquito commented Apr 16, 2018

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

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

// <StyledTitle>Foo bar</StyledTitle>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.