React Reusability — React Hooks vs Render Props vs Higher-Order Components (HOC)

If you don’t care about reusability, you can write as much as duplicated code as you want. For instance, you saw a piece of UI that has similar styles or has common users’ event in other pages of your app, you copy and paste some code from somewhere and modify it to finish the task. That’s not a good practice.

We’re going to compare react hooks, render props and Hoc by solving the same yet easy problem.

The requirement is to create multiple counter components. Assume the first counter have a button to increase the count and the second counter need to have increment and decrement button.

Higher-Order Components (HOC)

This is how the counterHOC looks like

It’s easy to understand, the CounterHoc received a initCounter as default count. It has a local state which is the count, and 2 methods - increase and decrease. The CounterHoc received a component as an argument and return the composed component in the render. Meaning that you can do whatever you want before returning back the composed component, like changing the states in some of…