What are the limitations with HOCs?
Higher-order components come with a few caveats apart from its benefits. Below are the few listed in an order,
- Don’t use HOCs inside the render method: It is not recommended to apply a HOC to a component within the render method of a component.
render() {// A new version of EnhancedComponent is created on every render// EnhancedComponent1 !== EnhancedComponent2const EnhancedComponent = enhance(MyComponent);// That causes the entire subtree to unmount/remount each time!return <EnhancedComponent />;}
The above code impact performance by remounting a component that causes the state of that component and all of its children to be lost. Instead, apply HOCs outside the component definition so that the resulting component is created only once.
- Static methods must be copied over: When you apply a HOC to a component the new component does not have any of the static methods of the original component
// Define a static methodWrappedComponent.staticMethod = function () {/*...*/};// Now apply a HOCconst EnhancedComponent = enhance(WrappedComponent);// The enhanced component has no static methodtypeof EnhancedComponent.staticMethod === 'undefined'; // true
You can overcome this by copying the methods onto the container before returning it,
function enhance(WrappedComponent) {class Enhance extends React.Component {/*...*/}// Must know exactly which method(s) to copy :(Enhance.staticMethod = WrappedComponent.staticMethod;return Enhance;}
- Refs aren’t passed through: For HOCs you need to pass through all props to the wrapped component but this does not work for refs. This is because ref is not really a prop similar to key. In this case you need to use the React.forwardRef API
May 27, 2022
598
Read more
What is React?
November 06, 2022
ReactJSHow to programmatically trigger click event in React?
November 06, 2022
ReactJS