Skip to main content

Higher-Order Components

Pass reusable logic down as props to components throughout your application

Overview​

Higher-Order Components (HOC) make it easy to pass logic to components by wrapping them.

For example, if we wanted to easily change the styles of a text by making the font larger and the font weight bolder, we could create two Higher-Order Components:

  • withLargeFontSize, which appends the font-size: "90px" field to the style attribute.
  • withBoldFontWeight, which appends the font-weight: "bold" field to the style attribute.

Any component that's wrapped with either of these higher-order components will get a larger font size, a bolder font weight, or both!

Implementation​

We can apply logic to another component, by:

  1. Receiving another component as its props
  2. Applying additional logic to the passed component
  3. Returning the same or a new component with additional logic

HOC

To implement the above example, we can create a withStyles HOC that adds a color and font-size prop to the component's style.

info

If you have a component that always needs to be wrapped within a HOC, you can also directly pass it instead of creating two separate components like we did in the example above.