Why React’s New Hooks API Is a Game Changer

I have been developing with React since it’s early days and during that time there have been many attempts by both influencers, as well as the core team to improve the API and patterns developers are using to creating software. One of the biggest challenges we have had was how to share behaviour neatly between components to enable reuse or even just separation of concerns. Every single solution proposed up until this point had some problems associated with it.

Luckily React has just released a glimpse of their new API for sharing behaviour in React components that looks like it will solve many of the problems we have had in the past. This is what it looks like: When React was first released, classes were not available in ES5 so React shipped with it’s own class creation method, which included the ability to merge in a bunch of methods from an object into the component you create. This unfortunately led to similar problems you find with classical inheritance; mainly indirection from magic undocumented methods appearing out of nowhere and being used on components.

The developer has no idea what functionality is available to them and more importantly what is not. This smell was so bad the React team decided to remove Mixins completely when they introduced a new ES6 class based API. Both the more recent attempts at sharing functionality between Components, namely Higher Order Components and Render Props, have also fallen short on an API level for several reasons.

Source: medium.com