Learn React with TypeScript 3

Consuming the withLoader HOC

Consuming a HOC is very simple. We simply wrap the HOC around the component that we want to enhance. The easiest place to do this is in the export statement.

Let's add the withLoader HOC we created in the previous section to our product page:

1. So, we are going to wrap the Product component with withLoader. First, let's import withLoader into Product.tsx:

import withLoader from "./withLoader";

2. Now we can wrap withLoader around Product in the export statement:

export default withLoader(Product);

We now get a compilation error in the ProductPage component because it expects to pass Product a loading property.

3. So, let's pass the loading property from the loading state where we reference Product in ProductPage ...