Skip to content

Spoke Right

Education for everyone

https://spokeright.com
Primary Menu
  • Home
  • Our Services
    • Translation
    • Interpretation
    • Transcription
    • Voice-Over
    • Proofreading
    • Content writing
  • Free Education
    • Learn Android Studio
    • Learn Python
    • Learn MongoDB
    • Learn MySql
    • Learn React
    • Montessori Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
    • TicTac
    • Checkers
    • Foosball
    • Billiards
    • Master Chess
    • Logic Game
  • Contact Us
Download Now
  • Home
  • Learn React
  • What is higher-order component in Reactjs
  • Learn React

What is higher-order component in Reactjs

Spoke Right December 16, 2022 2 min read

React Higher-Order Components

Also known as HOC, the React Higher-Order Components is an advanced technique that takes a component and returns a new component. It is used for reusing component logic.

Higher-Order Component Conventions:

  • HOCs should not be used inside the render method of a component.
  • To have access to the higher-order components, the static methods must be copied over.
  • Since ‘Refs’ does not pass through as a parameter or argument, hence HOCs does not work for refs.
  • If a ref is added to an element in the HOC component, it will not be referred to as a wrapped component but will be referred to as an instance of the outermost container component.

Syntax:

const NewComponent = higherOrderComponent(WrappedComponent);

Example 1:

function sub (x, y) {  
  return x - y  
}  
function higherOrderComp(x, subReference) {  
  return subReference(x, 10)  
}  
higherOrderComp(50, sub)

Explanation:
Here, we have created a function sub() and pass it as an argument to the higherOrderComp() function. For invoking, we renamed it as subReference in the higherOrderComp() function. Thus, a callback function is passed to a higher-order(HOCs) function.

 

Example 2:
HOC.js:

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

App.js:

import React, { Component } from 'react';  
import Hoc from './HOC';  
class App extends Component {  
render() {  
return (  
<div>  
<h2>Hello World!!</h2>  
<p> Have a Great day.</p>  
</div>  
)  
}  
}  
App = Hoc(App);  
export default App;

Output:

Explanation:
A file named HOC.js is created. It includes a function HOC, which accepts one argument as a component and that component is App in this example. The HOC.js file is then into the App.js file, and then later called. The App component is wrapped inside another React component. Thus, it is the primary application of the Higher-Order Components and we can modify it.

Continue Reading

Previous: How do I create a table in ReactJS
Next: Which is Difference Between AngularJS And ReactJS

Related Stories

Which is Difference Between AngularJS And ReactJS
1 min read
  • Learn React

Which is Difference Between AngularJS And ReactJS

December 16, 2022
How do I create a table in ReactJS
2 min read
  • Learn React

How do I create a table in ReactJS

December 16, 2022
What is code splitting in ReactJs
3 min read
  • Learn React

What is code splitting in ReactJs

December 16, 2022

This AD Will support Us

Support Us

Coding Ustad LTD Support
Coding Ustad LTD Support

Coding Ustad LTD

Coding Ustad LTD
Coding Ustad LTD

Recent Posts

  • How to Install Node.js and npm on CentOS 7
  • How to Install Node.js and npm on CentOS 7
  • How to Install CentOS Web Panel (CWP) on CentOS 7
  • The Power of Marketing in Real Estate: A Guide to Boost Your Business
  • Vehicle Verification in Pakistan

Get free Hosting

Hostens.com - A home for your website

You may have missed

How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 3, 2023
How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 2, 2023
How to Install CentOS Web Panel (CWP) on CentOS 7
3 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install CentOS Web Panel (CWP) on CentOS 7

May 2, 2023
The Power of Marketing in Real Estate: A Guide to Boost Your Business https://thaikadar.com/secureinvestment/
2 min read
  • Article By Spoke Right
  • Blog By Spoke Right
  • Circular Byte Private Limited

The Power of Marketing in Real Estate: A Guide to Boost Your Business

January 30, 2023
  • Home
  • Our Services
  • Free Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
  • Contact Us
Copyright © All rights reserved. | MoreNews by AF themes.