by Sai gowtham

Higher order components (Hoc) in React with examples

In this tutorial, we are going to learn about what are higher-order components and how to create it.

What are Higher order components (Hoc)?

The Higher order component is a JavaScript function which takes the other component as an a argument and returns new component.

Higher order components help us to reuse the component logic.

There are already some other react libraries using hoc pattern like connect in redux and withRouter in a react-router library.

Creating Higher order component

We are creating a higher order component which helps us to log the component props.

hoc.js
import React from "react";

function LogProps(MyComponent) {

  class NewComponent extends React.Component {

    componentDidMount() {
      console.log(this.props);    }

    render() {
      return <MyComponent {...this.props} />;    }
  }

  return NewComponent;}

export default LogProps;

In the above code, we created a function called LogProps which accepts other component as an argument and returning Newcomponent with logging props.

Using Higher order component

Welcome.js
import React from "react";
import LogProps from "./hoc";
function Welcome(props) {
  return <h1>Welcome {props.name}</h1>;
}

export default LogProps(Welcome);

Here we imported LogProps component and passed Welcome component as an argument so that we can see Welcome component props inside the browser’s console.

import React from "react";
import Welcome from "./Welcome";

function App() {
  return (
    <div className="App">
      <h1>Hello React</h1>
      <Welcome name="gowtham" />
    </div>
  );
}

hoc-example

Have you seen in the above image Welcome component props object is logged inside the console.

This a simple example, you can also create higher order components to protect your private routes in a similar way.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2022 (Beginner + Advanced)
JavaScript - The Complete Guide 2022 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY