React Hooks are a new feature which was introduced in react version 16.8 which allows you to use react features without a class components. we will learn about what are hooks and why hooks in React.



What are hooks in react


React hooks are specialised functions which allow you to use manage state and also various React features in functional components. React hooks were introduced in React version 16.8 to provide a simple, straightforward and consistent approach to work with state and other side-effects in functional components, which were limited to class components earlier.

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 class components, they let you use react without class components.

Why Hooks?

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.

1. The first reason 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 props, state, and unidirectional data flow, but will struggle to implement class components. You also have to remember to bind event handlers in the class components. On the react side, it is also observed that classes don't minify very well and make hot reloading very unreliable.

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


2. The second reason 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 HSE and render profs 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.


3. 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 realized that the related code is not organized in one place but scattered across the different life cycle methods.

For example, data fetching is usually done in componentDidMount and sometimes also in componentDidUpdate.

If you have to set event listeners you set them up in componentDidMount and unsubscribe in the componentWillUnmount. 

As you can see related code which is data fetching is split between componentDidMount and componentDidUpdate.

Code for event listeners again is in different methods componentDidMount and componentWillUnmount


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 componentDidMount and because of the stateful logic in many cases, it's not possible to break this component 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 16.8 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 backward 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.

Summary


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

1. 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.

2. The second reason is that hooks allow 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.

3. The final reason is that hooks, let us organize 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 of the what and why of hooks, let's start with our very first hook in the next article.

Thank you guys for reading this article.


Here is the link to know more about React routes