A gentle Introduction to Higher Order Components

  • I want to pick out one use case, the conditional rendering with higher order components, to give you two outcomes from this article as a reader.
  • First, it should teach you about higher order components with the use case of conditional rendering.
  • Keep in mind, that altering the look of a component with a higher order component, specifically in the context of conditional rendering, is only one of several use cases to use HOCs.
  • In order to teach higher order components, the article focuses on the use case of conditional rendering.
  • Now you could use the higher order component but with a function that determines the conditional rendering.

Higher order components, or known under the abbreviation HOCs, are often a hard to grasp pattern in React. The article gives you an introduction to HOCs, how to use them elegantly in the case of conditional rendering and how to abstract them…

@rwieruch: Always wanted to have an intro to higher order components? 🙃

✍️ New post about learning & elegance of HOCs #ReactJs

April 4, 2017 – Edit this Post on GitHub

Another fitting headline for the article could be: learn Higher Order Components with Conditional Rendering in React.

Higher order components, or known under the abbreviation HOCs, are often a hard to grasp pattern in React. These components can be used for multiple use cases. I want to pick out one use case, the conditional rendering with higher order components, to give you two outcomes from this article as a reader.

First, it should teach you about higher order components with the use case of conditional rendering. Keep in mind, that altering the look of a component with a higher order component, specifically in the context of conditional rendering, is only one of several use cases to use HOCs. For instance, you could use them to opt-in local state or to alter props as well.

Second, even though you might already know HOCs, the article goes a bit further by composing higher order components with the library recompose and by applying functional programming principles. You will get to know how to use higher order components in an elegant way.

In order to teach higher order components, the article focuses on the use case of conditional rendering. A conditional rendering in React can be applied in multiple ways. You can use if-else statements, the ternary operator or the logical && operator. You can read more about the different ways in another article about conditional renderings in React. If you are not familiar with conditional rendering in React, you could read the article first.

component.

component.

What are these edge cases I am speaking about?

are null? You would apply a conditional rendering to opt-out earlier from your rendering.

Second, what happens when your todos are not null but empty? You would show a message in a conditional rendering to give your application user an improved user experience (UX).

Third, since the todos arrive asynchronously from your backend, you want to show a loading indicator in case the todos are still in a pending request. You would get one more property, such as ‘isLoadingTodos’, to know about the loading state.

has not to worry about it anymore. Let’s enter the concept of higher order components to deal with it.

component.

are null.

, but it is not mandatory. In the end it makes it easier to distinguish components from higher order components.

or React lifecycle methods, you could return an ES6 class component.

As mentioned, the enhanced component doesn’t render anything. Let’s add the rendered output of the enhanced component.

First, there is a conditional rendering with the ternary operator. The higher order component decides whether it shows nothing or the input component based on the condition. If the todos are null, it shows nothing. If the todos are not null, it shows the input component.

, the latter would get all the props passed through the HOC as input with the JavaScript spread operator.

All the function and return statements make it hard to work with higher order components. You can use JavaScript ES6 arrow functions to make it concise again.

As a side note, to avoid confusion: In a JavaScript ES6 arrow function you can omit the curly braces. You transform the block body to a concise body. In a concise body you can omit the return statement because it will implicitly return.

Finally the first higher order component is finished. Let’s use it:

That’s it. As you can see, you can use it whenever you need it. Higher order components are reusable.

component. Let’s quickly implement two more higher order components that take ownership of the loading indicator and an empty list.

. You can use the JavaScript ES6 rest destructuring to split up the props.

props are passed to the input component.

component.

object.

component:

. Now you know how to use higher order components. As I said, the article taught HOCs leveraging conditional rendering. But you can use them for various use cases.

But it is kinda tedious to wrap all the components by hand into each other.

You could refactor it to:

Still, it is not readable. React embraces functional programming, so why are we not using these principles?

that allows you to return one function composed out of multiple functions. These multiple functions could be all of our conditional rendering HOCs. And that’s how you use it:

Now you can use the function to pass in your input component that needs to become an enhanced component with all the conditional renderings.

to pass your input component through all higher order component functions. The input components gets an enhanced version of the component in each function.

After all, higher order components themselves are reusable. By composing these components into each other, you get a lot of permutations of component enhancements.

component. You wouldn’t be able to use them in another context, to be more specific, in another component with a different props structure. Thinking about the long term investment in an application, you could abstract these higher order components to make them reusable by other components too.

As I mentioned, higher order components take an input component and an optional payload. These optional payloads are often used for configuration.

an optional payload. The payload is a function that returns true or false to decide the conditional rendering.

, because it takes a function that returns true or false.

Now you could use the higher order component but with a function that determines the conditional rendering.

HOC enables you to re-use it everywhere for a conditional rendering that returns the input component or nothing. It is independent of the input component, independent of the condition and independent of the props structure.

in our composition of HOCs.

has two arguments: the input component and the optional payload that is the conditional function. But composing works by passing only one value from function to function.

higher order component, you can use another higher order function.

you have to pass the condition function. It returns your higher order component. The HOC can then be used in the composition of recompose.

That’s a powerful abstraction, isn’t it? You can use the first higher order function to pass the optional payload and return the higher order component that is used in the composition.

You can use the naming conventions and principles of functional programming (FP) to name your abstracted higher order components properly. Developers who are familiar with FP will know the use case of the HOC by seeing its name.

higher order component.

. Even though the HOC is not an explicit type, it would use the naming convention of FP to make it simple to understand.

could take as additional payload a component that should be shown if the condition doesn’t match.

Last but least, let’s see everything in context to each other.

I hope the article helped you to learn higher order components in the context of conditional rendering. In addition, I hope that it gave you inspiration on how you can use abstraction and functional programming with higher order components.

A gentle Introduction to Higher Order Components