HoCs come in very handy when we have to deal with context.

Context is a feature that has always been present in React, and it is used in many libraries, even if it hasn't been documented much.

The documentation still advises that it be used very sparingly because it is experimental and likely to change in the future.

However, in some scenarios, it is a very powerful tool that can help us pass information down to the tree without using props at every level.

To get the benefits of context without coupling our components to its APIs, we can use an HoC.

An HoC can get the data from the context, transform it into props, and pass the props down to the component. In this way, the component is unaware of the context, and it can be reused easily in different parts of the application.

Also, if the APIs of the context change in the future, the only part of the application that has to be changed is the HoC because the components are decoupled from it, which is a big win.

There is a function that's provided by recompose that makes using context in a transparent way and receiving props very easy and straightforward; let's see how it works.

Suppose you have a Price component that you use to display the currency and the value. The context is widely used to pass down common configuration from the root to the leaves, and currency is one of those values.

Let's start with a context-aware component and let's transform it step by step into a reusable one, thanks to HoCs:

  const Price = ({ value }, { currency }) => ( 
    <div>{currency}{value}</div> 
  );
   
  Price.propTypes = { 
    value: number 
  };
   
  Price.contextTypes = { 
    currency: string 
  };

We have a stateless functional component that receives the value as a property and the currency as the second parameter from the context.

We also define the prop types and the context types for both values. As you can see, this component is not truly reusable because it needs a parent with the currency as child context types to work. For example, we cannot use it easily in our style guide and pass a fake currency as a prop.

First of all, let's change the component to get both values from the props:

  const Price = ({ currency, value }) => ( 
    <div>{currency}{value}</div> 
  );
   
  Price.propTypes = { 
    currency: string, 
    value: number
  };

Of course, we cannot substitute it with the previous one straightaway because no parents are setting its currency prop. What we can do is wrap it into an HoC that can transform the values  that are received from the context into props. We are using the getContext function from recompose, but you can easily write a custom wrapper from scratch.

Again, we use the partial application to specialize the HoC and reuse it multiple times:

  const withCurrency = getContext({ 
    currency: string 
  });

Then, we apply it to the component:

  const PriceWithCurrency = withCurrency(Price);

Now, we can replace the old Price component with the resulting one, and it will still work without being coupled with the context.

This is a big win because we did not have to change the parent, we can use the context without worrying about future API changes, and the Price component is now reusable.

We can pass arbitrary currencies and values to the component without needing a custom parent to provide the values.