Why to use higher-order components anyway?

This is the final post from the post series about higher-order components. In the previous posts, we’ve uncovered the ideas behind the concept of higher-order components. We’ve also learned how to create a higher-order component and how to compose several of them together and enhance a presentational component by them. As …

Use Recompose for higher-order components’ composition

In the previous post, you’ve seen some simple HoCs. However, this pattern is so powerful that it has been used in many React-based libraries (such as React-redux, React-router, Recompose). I would like to talk more about the Recompose library, which provides us with dozens of HoCs. It uses HoCs for everything …

Composition of higher-order components

If you check our example from the previous post, you’ll see that we have a new problem. The renderDisplayList component is no longer reusable since we moved the filtering logic inside it. To make it reusable again, we need to move the logic back to the withTransformProps HoC. To achieve …

Functional or class-based higher-order components?

If you went through the previous posts, you should be able to write reusable higher-order components yourself and have a better understanding of the ideas behind this pattern as well. Now, let’s talk about the difference between functional HoCs and class-based ones. When is it more convenient to stick to …

Make all the components reusable

In the previous posts, you’ve learned how to create a HoCs. Now, we’ll take a look at how to make them reusable. Making components reusable means to decouple them from the data. This means that they shouldn’t be dependent on a particular props structure. Sticking to reusable components helps you to …