Does order in which you wrap component with connect and withRouter matter

Question

Which HOC will wrap the other. Does the order of wrapping with multiple HOCs matter in react or not? I have created multiple HOCs withSocket, withLoadin

Answer 1

React is all about composition and in the majority of cases it shouldn't be a performance problem at all. Don't worry about it until you actually perceive a performance issue. Nesting HOC's is also fine. The only thing you need to take into consideration is when one of the HOC's consumes props injected by another HOC. This is e.g. the case when you need react-router url params in your mapStateToProps to select an object by id. Then you need to apply first the connect() HOC and only then the withRouter() HOC to access the match object in the ownProps of the wrapped component.