React Higher-Order Components in TypeScript made simple

  • These attributes were chosen to illustrate all the aspects of HOCs while keeping the HOC as simple as possible.PropsThere are three types of props we need to consider when creating a HOC: OriginalProps, ExternalProps and InjectedProps.OriginalProps are props of the wrapped component.
  • The state of the HOC is simple, just the count of the clicksOptionsAs stated before, HOC is a function that takes a component and returns a component.While this is true, many HOCs take the form of curried HOC factories (like the mentioned connect from react-redux) that take a configuration object…
  • If you need to interact with props or states from here, the only way to do it is to specify options as functions, that take the props or states as arguments.For ClickCounted the options are simple – a flag indicating whether to console.log on click:Putting it all togetherHaving declared all the…
  • Now that we have the signature, all that’s left is to implement the HOC:First, we define the type alias for the resulting component’s props — the TOriginalProps ExternalProps to simplify its reuse.
  • Props and state are passed to it with whatever was in the OriginalProps along with the clickCount from the HOC state.Using the HOCTo illustrate how to use our HOC, we create a Demo component, that displays a different text depending on the amount of clicks and a custom message.Notice the type…

On a simple React Higher-Order Component, the process of writing them in TypeScript is demonstrated along with advice and rationals behind the type declarations

React Higher-Order Components in TypeScript made simpleWhen refactoring a Higher-Order Component (HOC) in a TypeScript project at work, there was some confusion regarding how to write them properly. After a discussion with my friend and colleague Marek, I decided to write this guide for future reference. I hope it helps you too.What are HOCs?As per the official docs, HOC isa higher-order component is a function that takes a component and returns a new componentThey are used for extracting patterns common to multiple components into a single place, thus making the code more DRY. The most “famous” HOC is connect from the react-redux package.How to write them?For the purpose of this article, we will create out own HOC ClickCounted that counts the number of clicks and passes that count as a prop to the child component (we call this the wrapped component). It also displays the current number of clicks itself and can be styled using the style prop, similarly to a div. Finally, we can configure whether the component console.logs on each click. These attributes were chosen to illustrate all the aspects of HOCs while keeping the HOC as simple as possible.PropsThere are three types of props we need to consider when creating a HOC: OriginalProps, ExternalProps and InjectedProps.OriginalProps are props of the wrapped component. They are passed straight through, the HOC does not know anything about them.ExternalProps are props of the component created by the HOC. They are not passed to the wrapped component. There don’t have to be any.InjectedProps are props…

React Higher-Order Components in TypeScript made simple