Higher-order components: the ultimate guide (part II)

In the first part of this series, you learned how to write reusable higher-order components and hopefully understood the ideas behind this pattern as well. Now, you are going to learn the difference between class HoC and the functional one and we’ll spend a good amount of time understanding how the …

Higher-order components: the ultimate guide (part I)

The maintainable component structure is a crucial prerequisite for a stable React application. You can achieve this by writing your code in a functional way using higher-order components (HoCs). If you stick to this pattern, you’ll end up with reusable components that are both readable and easy to test as …

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 …