React High Order Component What is HOC type component in React JS:-

 React High Order Component What is HOC type component in React JS:-

It is used to access the functionality of another component to the HOC component, another component will be called a Reference on the HOC Component file.

It is also known as HOC. In React, HOC is an advanced technique for reusing component logic. It is a function that takes a component and returns a new component. According to the official website, it is not the feature(part) in React API, but a pattern that emerges from React's compositional nature. They are similar to JavaScript functions used for adding additional functionalities to the existing component.

A higher-order component function accepts another function as an argument. The map function is the best example to understand this. The main goal of this is to decompose the component logic into simpler and smaller functions that can be reused as you need.

Example of this Create HOC.js

import React, {Component} from 'react';  

  

export default function Hoc(HocComponent){  

    return class extends Component{  

        render(){  

            return (  

                <div>  

                    <p>High Order Component</p>

                    <HocComponent></HocComponent>  

                </div>  

  

            );  

        }  

    }   

}  

Create App.JS file

import React from 'react'

import Hoc from './HOC'; 

class App extends React.Component {  

  render() {  

    return (  

      <div>  

        <h2>APP Component Functionality</h2>    

      </div>  

    )  

  }  

} 

App = Hoc(App);  

export default App;