Can we use HOC inside the render method?

Q: Can we use HOC inside the render method?

Also due to this, remounting a component will result in **remounting of all the children component.** So HOC should be defined outside the component, ensuring that the component is created only once. React’s diffing algorithm (called Reconciliation) uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from render is identical (===) to the component from the previous render, React recursively updates the subtree by diffing it with the new one. If they’re not equal, the previous subtree is unmounted completely. 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 ; }

Difficulty: 6/10

higher-order components, render method, performance

No, If we use HOC inside the render method then it will affect the app's performance since the identity of HOC will not be preserved in this case.

Also due to this, remounting a component will result in remounting of all the children component. So HOC should be defined outside the component, ensuring that the component is created only once.

React’s diffing algorithm (called Reconciliation) uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from render is identical (===) to the component from the previous render, React recursively updates the subtree by diffing it with the new one. If they’re not equal, the previous subtree is unmounted completely.

javascript

Scenario Questions

0-2 years experience

2-5 years experience

1A teammate wrapped a list item component with a HOC inside the list's render function, and we saw a noticeable slowdown. Walk me through why that happened and how you'd fix it.

Follow-up Questions