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 …

Introducing higher-order components

In the previous post, you’ve learned about the basic principles of functional programming (FP). Now, we’ll take a look at how to use these principles in React. You’ll learn how to write reusable higher-order components and you’ll understand the ideas behind this pattern as well. React applications are composed of …