Higher-Order Components – React JS


This article is targeted to advanced users that wish to take advantage of the HOC pattern in React JS. If you’re unfamiliar with React then you are first suggested to begin your understanding with React JS. Higher Order elements is a Pattern that has tested to be terribly valuable for many React libraries but it is not part of React APIs. During this article, area unit going to explain very well what HOCs are, what you’ll do with them and their limitations.

Introduction(About HOC)

Higher-order part in React is a pattern capable of sharing common practicality between parts without code repetition. A higher-order part is truly not a part although, it’s an operate. An HOC operate takes a component as an argument and returns a component. It transforms one component into another component and adds further knowledge or practicality. Just a quick example.

const HOCComponent = (BaseComponent) => {

// … create new component from old one and update

return UpdatedComponent


Two HOC’s implementations are also conversant with in React system square measuring connect from revived and withRouter (React Router). This connect operate from revived is employed to administer elements access to global state within the revived store, and then it passes these values to the component as props. The withRouter function injects the router information and functionality into the component, enabling the developer access or change the route.

Higher Order element is a complicated manner of reusing the element logic. Basically, it’s a pattern that’s derived from React’s integrative nature. HOC’s are custom components that wrap another element at intervals in it. They will settle for any dynamically provided child element however they won’t modify or copy any behaviour from their input components. you’ll say that HOCs are ‘pure’ components

Pure components are the best and quickest components which might be written. They will replace any element that solely features a render(). These components enhance the simplicity of code and performance.

HOC can be used for many tasks like:

  • Code reuse, logic and bootstrap abstraction
  • Render Hijacking
  • State abstraction and manipulation
  • Props manipulation

What are Higher Order Components?

An Higher Order element is simply a React element that wraps another element.

This pattern is typically enforced as a operate, that is largely a category mill (yes, a category factory!), that has the subsequent signature in haskell impressed pseudocode

hoc Factory:: W: React.Component => E: React.Component

Where W (Wrapped Component) is the React.Component being wrapped and E(Enhanced element) is that the new, HOC React.Component being returned.

The “wraps” part of the definition is intentionally vague because it can mean one of two things:

  1. Props
  2. Proxy: The HOC manipulates the props being passed to the Wrapped ComponentW,
  3. Inheritance
  4. Inversion: The HOC extends the Wrapped ComponentW.

We will explore this two patterns in more detail later in this article.

What can I do with HOCs?

At a high level HOC enables you to:

  • Code reuse, logic and bootstrap abstraction
  • Render Highjacking
  • State abstraction and manipulation
  • Props manipulation

We will see this things in additional detail shortly. However first, we address area unit about to study the ways that of implementing HOCs as a result of the implementation with permits and restricts, what you’ll be able to truly do with an HOC.

Why we should keep our react components pure by using HOCs
PURE COMPONENT is one of the most significant ways to optimize React applications. The usage of Pure Component gives a considerable increase in performance because it reduces the number of render operations in the application.

When to use Pure Components?
Suppose you are creating a dictionary page in which you would like to display the meaning of all the English words starting with A. Now you can write a component which takes heading and meaning as props and return a proper view. Secondly, suppose you are using pagination to display only 10 words at a time and on scroll asking for another 10 words and updating the state of the parent component. Pure Components should be used in this case as it will avoid rendering of all the words, which were rendered in previous API request.
Also in cases where you want to use lifecycle methods of Component then we can use Pure Components as stateless components which don’t have lifecycle methods.

HOC factory implementations
In this section we are going to study the two main ways of implementing HOCs in React: Props Proxy (PP) and Inheritance Inversion (II). Both enable different ways of manipulating the WrappedComponent.

Props Proxy
Props Proxy (PP) is implemented trivially in the following way:

function propProxyHOC(WrappedComponent) {
return class PropProxy extends React.Component {
  render() {
         return ;

The necessary half here is that the render methodology of the HOC returns a React part of the WrappedComponent. we are conjointly submitting to the props that the HOC receives, that’s why the name is Props Proxy.


<WrappedComponent {…this.props}/>

// is equivalent to

React.createElement(WrappedComponent, this.props, null)

They each produce a React component that describes what React ought to render in its reconciliation method. If you would like to grasp a lot of concerning React parts vs parts see post by Dan Abramov and see the docs to browse a lot of concerning the reconciliation method.

What can be done with Props Proxy?

  • Manipulating props
  • Accessing the instance via Refs
  • Abstracting State
  • Wrapping the WrappedComponent with other elements

Manipulating props

You can browse, add, edit and take away the props that are being passed to the WrappedComponent.

Be careful with deleting or written material necessary props, what you ought to most likely namespace your Higher Order props to not break the WrappedComponent.

Example: Adding new props. The app’s current logged in user are going to be out there within the WrappedComponent via this.props.user

function propProxyHOC(WrappedComponent) {
    return   class PropProxy extends React.Component {
        render() {
            const newProps = {
                user: currentLoggedInUser

Accessing the instance via Refs

You can access this (the instance of the WrappedComponent) with an official. However you may want a full initial traditional render method of the WrappedComponent for the official to be calculated. This means that you just got to come back the WrappedComponent component from the HOC render technique. Let React do it’s reconciliation method and simply then you may have a official to the WrappedComponent instance.

Example: within the following example we are exploring a way to access instance strategies and therefore the instance itself of the WrappedComponent via refs

function refsHOC(WrappedComponent) {
    return   class RefsHOC extends React.Component {
        proc(wrappedComponentInstance) {
        render() {
            const props = Object.assign({}, this.props, {ref: this.proc.bind(this)})

The higher-order component pattern

A higher-order element could be a perform that takes a element as an argument and returns a element. This suggests that a HOC can continuously have a type just like the follow:

const   higherOrderComponent = (WrappedComponent) => {
    class HOC extends React.Component {
        render() {
            return   ;
    return   HOC;

A basic HOC by example

A HOC takes a component as input parameter and returns a new component. Let’s see the example of the most simple HOC possible.

import React from 'react';
const   withSecretToLife = (WrappedComponent) => {
    class HOC extends React.Component {
        render() {
            return   ();
    return   HOC;
export default withSecretToLife;

Notice that this HOC is nearly a dead ringer for our basic pattern. All we get done is to add a prop secretToLife=, which permits the wrapped part to access the worth by occupation this.props.secretToLife.

The other addition is that we have performed to unfold the props passed to the part. This ensures that for other props that square measure passed to the wrapped part are going to be accessible via this.props within the same manner what they might be referred to as if the part wasn’t well-versed our higher-order part perform.

import React from 'react';
import withSecretToLife from 'components/withSecretToLife';
const DisplayTheSecret = props => (
      The secret to life is {props.secretToLife}
const   WrappedComponent = withSecretToLife(DisplayTheSecret);
export default WrappedComponent;

Our WrappedComponent, which is just an enhanced version of , will allow us to access secretToLife as a prop.

Higher-order component considerations

  • A HOC ought to be a pure perform with no side-effects. It shouldn’t build any modifications and simply compose the first element by wrapping it in another element.
  • Do not use HOC’s within the render methodology of a element. Access the HOC outside the element definition.
  • Static ways should be derived over to still have access to them. an easy thanks to do that, which is the hoist-non-react-statics package.
  • Refs are not passed through.

About Author:
Author Ankit Trivedi is a Full stack developer currently working with QSS Technosoft. He is a technology writer in java, JavaScript libraries and frameworks like Reactjs, Node.js, Angular.js. He has completed his Master’s degree in Computer Science.

About QSS:
QSS has a proven track executing React JS applications for its esteemed customers. The company has a core competency in developing and delivering Enterprise level React JS applications. The iOS competency has experienced and dedicated team of React JS developers. To Know More...


Subscribe to our newsletter & stay updated

Renovate unique Business Processes into Digitally Transformed solutions with QSS Technosoft!

Do you want to remove manual operations, acting as impediment to your business growth? Realize your ideas into reliable web and mobile software solutions with our professional services. Take first step to launch your project by filling the form.

Moving Arrow point to Contact Form