Higher order components in React are a powerful way to keep aboard the DRY (Don’t repeat yourself) principle.

The way that I’ve taken to using higher order components is almost like inheritance in OOP languages. Take this Python example.

      class Animal:
          def type(self):
            print("This animal is a {}".format(type(self).__name__))

      class Dog(Animal):
         pass

      dog = Dog()   
      dog.type()
  

If it wasn’t clear, it prints out “This animal is a Dog”. But the beauty of this is it can be set once and be forever used by any type of animal that inherits from the class, and that’s a little taste of what can be done with HOCS as well. Let’s envision we have a bunch of components that all need a set of functions. We could declare those functions in all of the components, but my golden rule is if more than 2 components need a set of functions, it’s HOC time.

  const ThemeToggle = (BaseComponent) => {
    return class extends Component{
        constructor(){
          super();

          this.state = {
            darkModeOn: this.getTheme(),
            body: document.getElementById('body')
          }
       }

       getTheme = () => {
          return (localStorage.getItem("theme") === null || localStorage.getItem("theme") === 'light' ? false : true)
       }

       toggleTheme = () => {
         if(!this.state.darkModeOn){
           localStorage.setItem("theme", "dark");
           this.state.body.className = "dark";
         }else{
           localStorage.setItem("theme", "light");
           this.state.body.className = "light";
         }

         this.setState({
           darkModeOn: (this.state.body.className === 'dark' ? true : false)
         })
       }

       onStartup = () => {
         if(this.state.darkModeOn){
           this.state.body.className = 'dark';
         }
       }

       render(){
         return
              < BaseComponent
                 toggleTheme={this.toggleTheme}
                 darkModeOn={this.state.darkModeOn}
                 getTheme={this.getTheme}
                 onStartup={this.onStartup}
                 {...this.props}
                />
       }
     }
  }
  

So this example is from a project I was working on where I needed to be able to swap to a different style in the application from multiple components. Around 4 different components needed the state (passed down as props) from this HOC so it fit the bill perfectly. Once this is written and you know which components are going to be wrapped in the HOC you can already start using the methods as if they were passed normally. If you’ve never used HOC’s before and are wondering how you would wrap a regular old component in the set up above, all you do is pass the component you want to wrap as a parameter to the HOC.

    const ShinyNewComponent = ThemeToggle(OldComponent)
  

It’s that simple! Now any component we wrap with ThemeToggle has access to all 4 of the methods we passed as props. Hope this was helpful to anyone reading!