React is a popular front-end development platform that makes creating user interfaces and websites easy. However, when it comes to reusable components, React is not as forgiving as other frameworks. One way to overcome this issue is to use higher order components. These are components that take other components as input and produce outputs. This allows you to create reusable code without having to worry about the details of how each component works. To get started, you first need to create a project with React. Once you have created a project, you can use the createReactComponent() function to create a new component that uses another component as its input. The output of this function will be a new component that uses the input from the first component. Next, you need to add this higher order component into your project. To do this, you can use the addHigherOrderComponent() function. This function will add a higher order component into your project and will return an object that contains all of the information needed for creating this component. The key information in this object is the name of the higher ordercomponent and the value of its properties. The next step is to use this new component in your codebase. To do this, you can use the useHigherOrderComponent() function. This function will allow you to call functions on the output of the higher ordercomponent and will return an object that contains these functions along with their arguments. You can then call these functions in your codebase using either passByName or passByValue(). Once you have used these methods to create a high-ordercomponent in your project, it is time to test it out! To do this, you can use either of two methods: testing or live testing。 Testing means running your code through different tests before release so that you know whether or not it works correctly before making changes。 Live testing means running your code through different devices so that users can see how it behaves on different devices
Higher Order Components (HOCs) are a kind of React component which help you to reuse logic across your application. The terminology may sound complex but HOCs are easy to get grips with and can make your codebase simpler to maintain.
A Higher Order Component always wraps child components with additional functionality. A HOC is defined as a function which accepts a component as a parameter. It then returns a new component, which will typically render the input component wrapped with extra props.
A Simple Example
The best way to appreciate when HOCs make sense is to see them in action. Let’s consider a simple checkout system where the state of the user’s basket is stored centrally within the application. Our examples show Redux as the state store but this for illustrative purposes only.
Assume this object represents our app’s state:
We have a simple array which represents the items in the user’s basket. Our checkout components are going to derive additional values from this state, such as the total order value and the taxes to apply.
Our checkout system will probably need to show the total value within multiple independent components. There might be a sidebar widget showing the basket, a post-checkout review screen and a shipping cost calculator. A naive system that simply passed the checkout items as props would risk duplication of logic – each component would need to work out the total order value for itself.
Introducing the HOC
Let’s look at how a HOC can help:
The file exports a single function, withCheckout, that takes a React component as its only parameter (ComponentToWrap). Within the function, we create a new anonymous class that is itself a React component.
This new component’s render method creates an instance of the ComponentToWrap we passed into the function. We now have the opportunity to define the instance’s props. We forward the checkout items array as checkoutItems and make the pre-computed total value available as checkoutTotal.
Any props passed to the HOC are forwarded to the inner component, ensuring that it receives all the data it requires. The function returns the newly created anonymous class which is ready to be rendered throughout your application.
We use the connect method of react-redux so the checkout prop within the HOC receives the value of the checkout key in our Redux store’s state. This is an implementation detail – your HOC might maintain its own state or reach out to some other service within your application.
Using the HOC
Now it’s time to put our HOC to use.
We assume our withCheckout HOC is saved to withCheckout.js in the same directory as our new checkout review screen component. By wrapping the component with our withCheckout HOC, we can access and display the total order value. We don’t need to compute it ourselves or store it within the app’s state. If we ever wanted to update how the total is calculated (such as to add a fixed handling charge), we only need to make the change in one place – within our HOC.
You can now render
anywhere in your app. Our wrapped example doesn’t need to be passed any props as it sources its data from our Redux store. Because it’s wrapped with withCheckout, itself wrapped with Redux’s connect, the review screen automatically receives a checkoutTotal prop which sums the prices of all the items in the app’s state.
It’s now worth mentioning how we named our HOC: withCheckout. By convention, HOC names normally have a with prefix because they add something to the components they wrap. In our case, the HOC provides convenient access to our checkout basket which we’d otherwise need to implement within each component.
Advantages of HOCs
Using a HOC lets you abstract common behaviours out of components, minimising code duplication and increasing maintainability. HOCs enable a form of dependency injection. They help you keep your components simpler by allowing more to be passed in from the outside world.
HOCs are common within the React ecosystem. In fact, we’ve seen one within this article – connect(), part of react-redux, which subscribes your components to Redux state changes.
HOCs are popular because they provide a method of code reuse that doesn’t break the self-containment of components. The pattern utilises React’s composability to let you attach extra functionality without the risk of side-effects.
You could pass any component in your app to withCheckout without breaking anything – the HOC just attaches a few extra props. This is why it’s so important your HOCs forward all the props they receive ({…this.props} in our example). They mustn’t do anything that could interfere with the wrapped component’s normal operation.
It may feel like your components now have a dependency on your HOC. This isn’t the case. You could export a second version of your component that isn’t wrapped, giving consumers the choice of which they use.
Your component actually only insists on receiving certain props – checkoutTotal in our case. This could be supplied by the HOC or by passing a value wherever the component is rendered. Our HOC makes development simpler but hasn’t fundamentally changed the nature of our rendered components.
