Caveats

Don't use HOCs inside the render method:

RESETRUNFULL

render() {   // A new version of EnhancedComponent is created on every render   // EnhancedComponent1 !== EnhancedComponent2
   const EnhancedComponent = enhance(MyComponent);   // That causes the entire subtree to unmount/remount each time!
   return <EnhancedComponent />;}

render() {   // A new version of EnhancedComponent is created on every render   // EnhancedComponent1 !== EnhancedComponent2
   const EnhancedComponent = enhance(MyComponent);   // That causes the entire subtree to unmount/remount each time!
   return <EnhancedComponent />;}

The problem here isn't just about performance — remounting a component causes the state of that component and all of its children to be lost.

Don't mutate the original component:

RESETRUNFULL

function logProps(InputComponent) {
   InputComponent.prototype.componentDidUpdate = function(prevProps) {
      console.log('Current props: ', this.props);
      console.log('Previous props: ', prevProps);
   };   // The fact that we're returning the original input is a hint that it has   // been mutated.
   return InputComponent;}// EnhancedComponent will log whenever props are receivedconst EnhancedComponent = logProps(InputComponent);

function logProps(InputComponent) {
   InputComponent.prototype.componentDidUpdate = function(prevProps) {
      console.log('Current props: ', this.props);
      console.log('Previous props: ', prevProps);
   };   // The fact that we're returning the original input is a hint that it has   // been mutated.
   return InputComponent;}// EnhancedComponent will log whenever props are receivedconst EnhancedComponent = logProps(InputComponent);

One resulting problem is that the input component cannot be reused separately from the enhanced component. More importantly, if you apply another HOC to EnhancedComponent that also mutates componentDidUpdate, the first HOC's functionality will be overridden! This HOC also won't work with function components, which do not have lifecycle methods.

MENU

Caveats