Discussion on: Why apply Open/Closed principles in React component composition?

Awesome. I love to see how classic principles/best practices are applied in new contexts. Thanks!

Point that I find the most important here is that instead of making component more complex, we can make it more extensible and use it as a building block for other components. Each of them will have a single responsibility and avoid the noise you mention.

The way to do that is not necessarily through higher order components though. It's simpler to create a "hole" in a component by introducing a prop by which we pass nodes. In OrderReport that would be children.

We could implement FastOrder as a standard component that uses OrderReport and extends it with some extras:

const FastOrder = (props) => {
  const [fastTracker, setFastTracker] = React.useState(props.isFastTracked);

  return (
    <OrderReport customer={props.customer}>
      <br />
      <button
        onClick={() => {
          setFastTracker(!fastTracker);
        }}
      >
        Toggle Tracking
      </button>
      {fastTracker ? (
        <div>Fast Tracked Enabled</div>
      ) : (
        <div>Not Fast Tracked</div>
      )}
    </OrderReport>
  );
}

We can repeat this process for the next two components, much like you did, but without burdening ourselves with the concept of higher order components.

Also, what I would do at this point is to make OrderReport a component that's only used to build other components (kinda like an abstract class). Then we would have

const SimpleOrder = (props) => <OrderReport {...props} />

Should the requirements only for the basic order change, we can amend SimpleOrderReport, which doesn't affect the other components!