The higher-order component pattern

A higher-order component is a function that takes a component and returns a component. The definition of higher-order components is similar to higher-order functions, which JavaScript supports. Higher-order functions are functions that receive a function as a parameter or return a function.

The higher-order component pattern allows us to pass additional props to a component.

Implementation/example

The following is a simple render prop, withLocation, which injects window.location.href and window.location.origin into a component as props:

const location = {
  href: window.location.href,
  origin: window.location.origin,
};
export function withLocation(Component) {
  return (props) => {
    return <Component location={location} {...props} />;
  };
}

The pattern that’s used when using higher-order components is to export default the higher-order component called...