Advanced React Patterns on Reuse: Render props with higher order functions.

When everything is working, React is fun!

Since React is very unopininiated, developers tend to have opinions on what are the best ways of working with Reacts’ features.

React code re-usability is a big subject of discussion, primarily involving Context API, Hooks, Render props, and HOCs.

There is a wide variety of literature (most of it is dated after 16.8 release of hooks and the maturity of context API) on which approaches are suitable in which situations and debate on better reuse. Google search this for a proof.

Photo by Xavi Cabrera on Unsplash

Most of the aforementioned debates are around 3 main categories:

1. I have cross-cutting data features (state, APIs, additional filters, subscriptions) that I need to incorporate into my presentation layer — HOCs, Render props, and Hooks
2. I have cross-cutting back end for front-end features (logging, authentication, event generation, skeleton loaders) that I need incorporate into the application functionality — Hooks, Context, HOCs
3. I have global features that need to cut across the entire application — Context, Global State

General acceptance is HoCs will provider better composability, such as JavaScript functional composition over…