React Higher-Order Components

React Higher-Order Components

Higher order components are JavaScript functions which are used to add extra functionality to the existing object. These functions are pure, which means that they receive data according to that data and return values accordingly. If the data changes, it re-runs higher order functions with different data input. If we want our returning part to be updated we don't need to change the HOC. All we need to do is alter the data our function uses.

It is also called HOC. In React HOC is an advanced component logic reuse technique. It's a function that takes a component and makes a new component return. It is not the feature(part) in the React API, according to the official website, but rather a pattern that emerges from the compositional nature of React.

A function that has a higher order component accepts another function as an argument. The map function is a perfect example for understanding this. The main objective of this is to decompose the logic of the components into simpler and smaller functions which can be reused as needed.

const NewComponent = higherOrderComponent(WrappedComponent);  

We know that the component transforms props into UI, and a component of a higher order converts another component and allows additional data or functionality to be introduced to it. Hocs are common in libraries held by third parties. The examples of HOCs are the connecting of Redux and the createFragmentContainer of Relay.

function add (x, y) {  
  return x + y  
}  
function higherOrder(x, addReference) {  
  return addReference(x, 25)  
}  
higherOrder(55, add) 

In the example above we've created two add() and higherOrder() functions. Now we provide the function add() as an argument for the function higherOrder(). For invoking, rename the higherOrder() function to addReference, and then invoke it.

Build a new script, called HOC.js. We've made one function HOC in this file. As a component it accepts one argument. That component is App here.

import React, {Component} from 'react';  
  
export default function Hoc(HocComponent){  
    return class extends Component{  
        render(){  
            return (  
                <div>  
                    <HocComponent></HocComponent>  
                </div>  
  
            );  
        }  
    }   
}  

Now, include the file HOC.js into the file App.js. We need to call the HOC function into this file.

The component of the App wrapped in another component of React, so we could change it. It thus becomes the primary application of Components of the Higher Order.

import React from 'react';

var newData = {
   data: 'This is HOC Example',
}

var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

Higher-Order Component Conventions

• Do not use HOCs within a component's rendering process.
• To get access to them, the static methods must be copied over. Use hoist-non-react-statics package to copy all non-react static methods automatically.
• HOCs don't work for refs because 'Refs' doesn't pass as a parameter or argument. If you add a refer to an element in the HOC component, the refer refers to an instance, not the wrapped component, of the outermost container component.