HOCs vs Render Props

Sharability and re-usability of app logic is often key. After all, the mantra is "don't repeat yourself" for a reason. The most recent trend for this in the React world are "higher order components", HOCs for short.

Let's take a look together at some of the previous approaches to sharing logic between components. How did they evolve and what benefits do HOCs have over them?