Higher-Order Component: Convention: Wrap the Display Name for Easy Debugging

function withSubscription(WrappedComponent) {
  class WithSubscription extends React.Component {/* ... */}
  WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
  return WithSubscription;
}

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

To ease debugging, choose a display name that communicates that it’s the result of a HOC.

Related concepts

Convention: Wrap the Display Name for Easy Debugging

Higher-Order Component: Convention: Wrap the Display Name for Easy Debugging — Structure map

Clickable & Draggable!

Higher-Order Component: Convention: Wrap the Display Name for Easy Debugging — Related pages: