Using react higher order component

When you start to work with lots of React components, and you realised alot of component patterns are the same, then you want to reuse these component patterns which is where Higher Order Component(HOC) kicks in. Think of HOC as higher order function:

usually you write function in Javascript:

  const thisFunction = function(a, b) {
    return a + b;
  }
  thisFunction(1, 2); // return 3;

Higher order function basically is just a function returns a function.

  const higherOrderFunction = function() {
    const thisFunction = function(a, b) {
      return a + b;
    }
    return thisFunction;
  }

  const getHigherOrderFunction = higherOrderFunction();
  getHigherOrderFunction(1, 2); // return 3

lets take an example at React Components:

Here what we saying is create a component called Dropdown, and takes in another component called DropdownMenuItemComponent, and when toggle it should open the menu… A typical dropdown menu pattern.

import React, { Component } from "react";
import DropdownMenuItemComponent from "./DropdownMenuItemComponent"

class Dropdown extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  toggle = e => {
    this.setState({
      open: !this.state.open
    });
  };

  render() {
    return (
      
); } } export default Dropdown;

Lets say you want to keep these patterns/methods as parent component, example toggle etc… or you want to pass in some props and change methods based on the props then HOC(higher order component will be really useful).

Its pretty easy to create a HOC, same as higher order function, we should create a function and return a Component method.

import React, { Component } from "react";
import DropdownMenuItemComponent from "./DropdownMenuItemComponent"

const dropdownHOC = (PassedInComponent) => {
    class Dropdown extends Component {
      constructor(props) {
      super(props);
      this.state = {
        open: false
      };
    }

    toggle = e => {
      this.setState({
        open: !this.state.open
      });
    };

    render() {
      return (
        
// noted that passed in all props to component here.
); } } return Dropdown; } export default dropdownHOC;

and you can use the component by passing the component into this function.

  dropdownHOC(WhichEverComponentHere);

lets say you want to pass in some properties from component to dropdownHOC function, use currying…

import React, { Component } from "react";
import DropdownMenuItemComponent from "./DropdownMenuItemComponent"

const dropdownHOC = (PassedInComponent) => (props) => {
    class Dropdown extends Component {
      constructor(props) {
      super(props);
      this.state = {
        open: false
      };
    }

    toggle = e => {
      this.setState({
        open: !this.state.open
      });
    };

    render() {
      return (
        
// noted that passed in all props to component here.
); } } return Dropdown; } export default dropdownHOC;

and now you can passing the props like this:

  dropdownHOC(WhichEverComponentHere)({propsKey: "value"});

Published by max

Web developer and Interaction Designer base in Singapore