Higher-order components are a great way of reusing common functionality in your react app. TypeScript is a great way of making sure your react app can grow without you losing your mind. So how can we use the two together? Higher-Order Components A higher-order component (HoC) is a function that accepts a component as an argument and returns a new component that has been enhanced in some way. const EnhancedComponent = myHigherOrderComponent(WrappedComponent); The enhanced component can add behaviour, manage state or in any other way modify WrappedComponent. Injecting Props A common pattern is for a higher-order component to provide some props to the wrapped component, moving the management of those props out of WrappedComponent and allowing it to focus on other concerns. For example, connect(...)(WrappedComponent) in react-redux provides props to both expose redux state and to dispatch actions. withRouter(WrappedComponent) in react-router similarly injects routing-related props into WrappedComponent from the current route.


I guess you came to this post by searching similar kind of issues in any of the search engine and hope that this resolved your problem. If you find this tips useful, just drop a line below and share the link to others and who knows they might find it useful too.

Stay tuned to my blog, twitter or facebook to read more articles, tutorials, news, tips & tricks on various technology fields. Also Subscribe to our Newsletter with your Email ID to keep you updated on latest posts. We will send newsletter to your registered email address. We will not share your email address to anybody as we respect privacy.

This article is related to


Development,React,TypeScript,higherordercomponent,hoc,software-development,web