Managing React State With Render Props

Brief Introduction
Over the years, React has evolved with different patterns and techniques to solve two fundamental problems:

How to share and reuse code.
How to manage unidirectional state.

In early versions of React, there was the concept of mixins. These ended up being a fragile solution. Mixins were eventually deprecated and a new pattern emerged called Higher-Order Components (HoC). A HoC helps solve our first issue of sharing and reusing code in a maintainable and composable manner.