The render prop pattern
The render prop pattern is apparent when a component allows its consumer to define how a part of that component is rendered, via a function prop. These can be children as a function or another prop, which is a function that takes some parameters and returns JSX.
Render props allow for a level of inversion of control. Although a component could completely encapsulate rendering and business logic, it instead yields control of some parts of the rendering logic to its consumer.
Such inversion of control is useful to share logic without sharing the visuals or actually rendering the UI. Therefore, this pattern is widespread among libraries. A prime example is Formik, which gives consumers flexibility on how to render a form while providing an abstraction over the form’s state management logic.
Use cases
Let’s start with a scenario where we build a CoupledSelect component, which is a wrapper for the select native element. We’ll build...
