Understanding composition through higher-order components

Composition might be the most important technique in software design overall, and like many other fundamental design principles, it applies on many different levels. In this section, we’ll review how we can use higher-order functions and their variation in the React world – higher-order components – to implement composition.

Reviewing higher-order functions

We discussed some examples of higher-order functions in Chapter 9, but it’s such an important concept that I would like to review it a bit more here. A higher-order function (HOF) is a function that either takes another function as its argument, returns a function, or both. The ability to accept a function as a parameter has a lot of advantages, especially when it comes to composition.

Consider the following example:

const report = (content: string) => {
  const header = "=== Header ===";
  const footer...