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

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

function withStyles(Component) {
  return (props) => {
    const style = {
      color: 'red',
      fontSize: '1em',
      // Merge props
      ...props.style,
    };

    return <Component {...props} style={style} />;
  };
}

const Text = ({ style }) => <p style={style}>Higher Order Component</p>;
const StyledText = withStyles(Text);

Stackblitz

const Text = withStyles(() => <p style={{ fontFamily: 'Inter' }}>Hello world!</p>);