Higher order components are JavaScript functions used for adding additional functionalities to the existing component. These functions are pure, which means they are receiving data and returning values according to that data. If the data changes, higher order functions are re-run with different data input. If we want to update our returning component, we don’t have to change the HOC. All we need to do is change the data that our function is using.

Higher Order Component (HOC) is wrapping around “normal” component and provide additional data input. It is actually a function that takes one component and returns another component that wraps the original one.

Let us take a look at a simple example to easily understand how this concept works. The MyHOC is a higher order function that is used only to pass data to MyComponent. This function takes MyComponent, enhances it with newData and returns the enhanced component that will be rendered on the screen.

Note − Higher order components can be used for different functionalities. These pure functions are the essence of functional programming. Once you are used to it, you will notice how your app is becoming easier to maintain or to upgrade.

Tutorial Pace is Pakistan's first and only platform from where you can learn market demanding technologies right from developers. Tutorial Pace is developed by a developer for developers. We are working to maintain the quality of content and practical knowledge within our tutorials.