Build Single page application with React and Django Part 7 — How to Refactor Function Components with HOC?

Introduction

This series is to build a SPA with ReactJS and Django. We have discuss a few topics on the part 1 to part 6. The next step is to get users from the search engine after deployment.

You can skip the introduction and proceed to the procedures if you like.

High-Order Component (HOC)

High-Order Component (HOC) is a skill to reuse the duplicated parts for ReactJS components. It just like a decorator added to the original functions. The basic of HOC is to use two properties from JavaScript, Carrying function, and High-Order function.

This article is a note to apply HOC for ReactJS components to subtract the duplicate parts.

Carrying function and High-order function

In JavaScript, we can use a carrying function to reuse the duplicate part of different functions. The structure of the carry function is a function with an inner function. It means that we can use do extra things besides the original function and generate a new function.

For example, we have two functions and we would like to use the carrying function to reuse the…