React HOC

React Higher-Order Components

A higher-order component (HOC) is a classically advanced architectural technique in React for aggressively reusing core component logic without code duplication. Concretely speaking, a higher-order component is fundamentally just a function that accepts an entire component as an argument and returns a newly wrapped component.

Creating an HOC

function withLogger(WrappedComponent) {
  return function(props) {
    console.log("The Wrapped Component has been rendered to the screen!");
    return <WrappedComponent {...props} />;
  };
}

While complex HOCs were incredibly common in older class-based React codebases, custom functional Hooks are widely considered the preferred and modernized way to natively share logic in modern functional React implementations.