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 …

Higher-order components as pancakes decorations? Why not?

In the previous post, you’ve learned how higher-order components (HoCs) work under the hood and how to define one yourself. Now, we’ll take it a little bit easier. We’ll use pancakes metaphor to help you to illustrate the principles of the higher-order component in a more engaging way. Let’s start with …