Drilling into React Hooks

Motivation

If you’re currently learning React or working on React, you must have realized that the library is more complicated than it actually seems. It uses Components to render UI and most of the time these components hold some states. Most of the code that we write, somehow deals with reading or updating those states, so it's really important to understand how react components manage states internally.

Before hooks were introduced, the only way to modify state was with Class Components & with time and growth of application, we realized that we are writing a lot of “unmanageable mess” to manage stateful logic & side effects on any components. At the same time, it becomes really difficult to break the components and bifurcate the stateful logic into another component.

Also, wrt the readability of the code, each lifecycle method was containing unrelated data. For E.g. Here is how the lifecycle method will look like while doing tasks such as updating the DOM state and setting a timer.

Here you can see how the related code of maintaining interval and updating DOM state is defined in different lifecycle methods. Harder to follow, no?

To solve the above problem of separation of concern, react had introduced many advanced features like render props, higher-order components, consumer, providers etc. but introducing those layers had resulted in “wrapper hell” of components and that resulted in even more complex issues like bulky components which had created performance issue and were hard to maintain too.

Enough of Motivation, Now it's time to understand hooks and how to hook those hooks into our functional components. Sounds Confusing? No worries, just go with the flow for now ‘ )

According to react official docs, Hooks are a new addition to react 16.8 that lets you use states or other react features without writing a class. They are functions that let you “hook into” react state & lifecycle features from functional components without changing the existing component hierarchy.

TL;DR: We can’t use hooks inside of a Class component and they are 100% backwards-compatible, which means you can still build your whole application without the knowledge of hooks, but trust me if you once get the proper hang of hooks, there is no looking back.

There are different types of hooks available. In this article, we are going to learn about the useState hook. But before jumping on hooks, let’s write our world-famous counter application with the help of the Class component. sounds too cliche? Sorry Can’t help: |

Essentially, all this component does is, create & implement two buttons namely increment and decrement, and print the current count variable’s value. We are using setState() to update the state accordingly.

Now let's understand how using the useState() hook, we can modify the component into a functional component.

Step 1: Convert the class Component into a functional Component.

Step 2: Introduce initial State

The useState() takes an initialState which is in our case is 0 and in return, it gives us an array of 2 entries. Here the first entry contains our state variable(count) and the second entry contains a method to update the value of our state. Here we are using the ES6 Destructing feature, to extract values directly for better understanding.

Step 3: Updating State

Here we can directly use the setCount() provided by useState() and provide the new value to our count variable. This will make our count = count + 1; Now let’s rewrite the whole application with functional component and hooks.

AWESOME.. Can you just see, how readable the code look now : )

Hooks Gotchas

Only Call Hooks at the Top Level. Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.

Only Call Hooks from React Functions. Don’t call Hooks from regular JavaScript functions.

Yeah, that’s all for this article. There are few more important concepts available wrt useState hook, but for simplicity purpose, I’ll keep them in another one.

If you like the article, don’t forget to press that clap button :) Adios!!!