React Higher Order Components Simple Higher Order Component


Let's say we want to console.log each time the component mounts:


export default function hocLogger(Component) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Hey, we are mounted!');
    render() {
      return <Component {...this.props} />;

Use this HOC in your code:


import React from "react";
import {hocLogger} from "./hocLogger";

export class MyLoggedComponent extends React.Component {
    render() {
        return (
                This component get's logged to console on each mount.

// Now wrap MyLoggedComponent with the hocLogger function 
export default hocLogger(MyLoggedComponent);