Why React Hooks exist ?

As a matter of fact React was already the most loved and wanted Web Framework by late 2018 when Hooks were first introduced to the world at React Conf 2018.

So Why did Facebook dedicated a whole team to develop a new API ?

What issues were React facing as a framework and how Hooks are the answer to most of those arising issues?

To first understand the issues we will have to go a little back in history to May 29, 2013 when React was first introduced to the world at JSConf.

Basically till then Javascript didn't had any inbuilt Class system. So we had to use createClass to create a React Component.

Now cut to January 17, 2015 ES6 is introduced to the world introducing class declarations in JS. React has always embraced JS features. So on Jan 27, 2015 classes first land in the React world as well.

We have now the constructor method to initialise state instead of getInitialState. We must invoke super(props) as the first line inside constructor. Also we had to bind our handlers else we would get the error of undefined this object.

Shortly after this Class Fields proposal was introduced removing the need of constructor function to initialise state. And our handlers can now be Arrow functions removing the need to bind them in constructor function.

Cool, but still why the need for Hooks.

React's core concept is to break a complex UI into components and then compose them to build the actual UI. In breaking our UI into components most of our Logic is sprinkled between the LifeCycle methods making it tightly coupled to the component. And thus we cannot easily share the Non Visual Logic between our different components.

Several patterns such as Higher Order Component (HoC) pattern and Render Props pattern were proposed to solve the issue of sharing the Logic between components.

But they had their own bit of issues such as using multiple HoC introduced the popular issue of Wrapper Hell.

So we needed an API that makes sharing Non Visual Logic Simpler, Composable, Flexible and Extendable.

Enter Hooks. As per official documentation

"Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class."

Marketing pitch for Hooks is that they allow you use state and LifeCycle methods inside a functional component. Hmm interesting...

But according to me Hooks are more than just that.

Let's go through my Marketing pitch for Hooks.

• State:- Using the useState Hook we can add state to a functional component.

useState Hook accepts a singular argument which acts as the initial state returned and assigned to the first element of the Array, the second element of the Array is setter function used to set the value of this state variable just like setState in case of class components.

• LifeCycle:- The biggest problem with using LifeCycle methods in a class based component is that the related logic is distributed between different LifeCycle methods thus making it difficult to manage and reason about.

Using the useEffect Hook these distributed logic can be combined in a single place. useEffect takes two arguments first the callback function and second the list of dependencies as an array. Whenever any dependency from the list changes it simply executes the call back function provided as the first argument.

So much clean code isn't it ?

• Sharing Non Visual Logic:- Till now you might be thinking there will be a special Hook to do this as well but instead we can create our Custom Hooks to achieve this.

And the final code will become

Sweet isn't it.

So now we know the power React Hooks API possess. Let's save further discussions for some other day.

Till then take care and stay safe.