{{announcement.body}}
{{announcement.title}}

How to Use Higher-Order Components in React

DZone 's Guide to

How to Use Higher-Order Components in React

We take a look at how to implement higher-order components in React by using these components to create a fancy button for a sample web app.

· Web Dev Zone ·
Free Resource

In JavaScript, we have higher-order functions (HOC), which are basically functions that accept functions. In React, higher-order components are basically functions which accept component as parameters, inject or modify their props, and return a modified component.

Real world use case: Suppose you have a button that you want to be rendered with two different styles. Using the main ideas behind HOC, we do not need to create two buttons with different styles, but, rather, create a single button component and pass it through a wrapper function that modifies its props or styles and returns a new component.

So let's start with a practical example:

Create a React component with create-react-app and remove the boilerplate code from App.js.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">

      </div>
    );
  }
}
export default App;

Now create a ButtonWrapper.js file, which will export our HOC:

const translateProps = (props) => {
    let modifiedStyle = { ...props }
    if (props.disable) {
        modifiedStyle = { color: 'red' }
    }
    else {
        modifiedStyle = { color: 'green' }
    }
    return modifiedStyle;
}

export default (ButtonWrapper) => {
    return function toBeRendered(props) {
        return ButtonWrapper(translateProps(props))
    }
}

Here, we have a function exported as default which accepts a component as a parameter, then it returns that component by passing new props to it (which I decided to base on passed props).

Now, create a RenderButton.js file, which will create a functional component:

import React from 'react';
import ButtonWrapper from './ButtonWrapper'
const RenderButton = (props) => {
    return (
        <button style={props}>Click me</button>
    )

}
export default ButtonWrapper(RenderButton)

Now, modify App.js and include the RenderButton component:

  <div className="App">
        <RenderButton disable></RenderButton>
   </div>

So what we did is, basically, we only used RenderButton to display a button, but, inside RenderButton, we exported RenderButton wrapped inside an HOC, which changes its styles based on the props passed toRenderButton. In our example, if we pass disable as true, then the button will be red, otherwise, the button will be green.

Obviously, this could be done with conditional rendering or modifying props in RenderButton based on an if condition, but the main concept behind HOC is to maintain the context. If a component could be used in different ways, then, rather than implementing logic in component only, we should extract logic to another layer so that the component remains clean.

For the code, refer to my GitHub: https://github.com/piyush96arora1/react-hoc-demo.

Topics:
web dev ,higher-order functions ,higher-order compontents ,react.js tutorial ,javascript tutorials

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}