In this article, let's learn about What are hooks and why hooks are introduced in React?

What are hooks in react?

Hooks are a new feature addition in react version 16.8 which allows you to use react features without having to write a class

For example, a react components state

Previously, you could use state only within class components, with hooks it is now possible to use State and also other react features without writing a class.

What you should keep in mind is that hooks don't work inside classes, they let you use react without classes.

Alright now that we know hooks are a feature to use other react features without using a class. Let us understand the motivation for hooks, why did the react team feel that there was a necessity for a feature like hooks this is also the place where your knowledge of react fundamentals and experience creating react apps will help you better relate to the different reasons


Reason1- it is more related to JavaScript than react itself to work with classes

you have to understand how this keyword works in JavaScript which is very different from how it works in most other languages.

People can understand probs, state, and unidirectional data flow, but will struggle to implement class components. You also have to remember to bind event handlers in class components.

On the react side, it is also observed that classes don't minify very well and make hot reloading very unreliable.

With hopes, since you are not working with classes anymore you will not have to face these problems.


Reason 2 - this reason kind of touches on the advanced topics in react such as higher-order components and the render prompts pattern.

Having worked with react you would have learned that there is no particular way to reuse stateful component logic between components.

The HOC and render props patterns do address this problem but you would have to restructure your components which kind of results in awkward looking code.

You end up wrapping your components with several other components to share the functionality. This only makes the code harder to follow.

So there is a need to share stateful logic in a better way, hooks help us in this aspect by allowing us to reuse stateful logic without changing your component hierarchy.


The final reason, is to do with how code is placed in a component and the fact that complex components become hard to understand. When you've had to create components for complex scenarios such as data fetching and subscribing to events.

You would have realised that the related code is not organised in one place but scattered across different life cycle methods.

For example, data fetching is usually done in component did mount and sometimes also in component did update. If you have to set event listeners you set them up in component did mount and unsubscribe in component will unmount. As you can see related code which is data fetching is split between component did mount and component did update. Code for event listeners again is in different methods component did mount and component will unmount.

Completely unrelated code on the other hand that is data fetching and event listeners end up in the same code block, that is both of them end up in component did mount and because of the stateful logic in many cases it's not possible to break this components into smaller ones.

It would be so much better if all the related code was together. this is another problem hooks solve.

Rather than forcing a split based on lifecycle methods hooks let you split one component into smaller functions based on what pieces are related. So these reasons are the motivation behind hooks.

Alright now let me also mention a few noteworthy points 

To be able to use hooks you have to use react version sixteen point eight or higher but the best part is that hooks are completely opt-in. You don't have to learn or use hooks if you don't want to.

Hooks don't contain any breaking changes and the release is hundred percent backwards compatible.

The react team also does not have any plans of removing classes from react.

You can continue to use classes and gradually start rewriting them with hooks if it is simple and you feel confident.

You can't use hooks inside a class component but your app can definitely mix classes and functional components with hooks.

the bottom line is hooks don't replace your existing knowledge of react concepts, instead hooks provide a more direct API to the react concepts you already know such as props state context refs and life cycle.

Before winding up this introduction let's quickly take a look at the summary 

Hooks are a new feature addition in reactivation 16.8, they allow you to use react features without having to write a class, there are three important reasons for the introduction of hooks by not having to use classes hooks avoid the whole confusion with this keyword, since hooks don't need a class react components will also minify better 

The second reason is that hooks I love you to reuse stateful logic without changing your component hierarchy you can avoid advanced react patterns to a great extent which makes the code much simpler to follow 

The final reason is that hooks let us organise the logic inside a component into reusable isolated units mutually related code can be put together which will avoid trivial bugs and inconsistencies 

Now that we have a solid understanding about the what and why of hooks let's start with our very first hook in the next article.