React Hooks

Hooks provides you a way to manage state inside the functional component. Hooks is introduced in version 16.8. Previous to this version, if you have to manage the state of component then you have to use class component because stateful logic was not supported by functional component.

1. The concept of this keyword in the javascript classes is quite different from the other languages and is difficult to understand by the programmers new to Javascript. So in function, there is no concept of this keyword which makes it easy to use. But as functions were not able to manage the stateful logic before version 16.8 so you have to make use of class Component. But with hooks now you can manage stateful logic inside your functional component.

2.. Using functional component makes your code optimized and clean while classes make it a little bit complex.

4. While using lifecycle methods like ComponentDidMount(), componentUpdate(),ComponenetWillMount will make things scattered by keeping relevant code apart.With hooks, you can keep all your relevant code together.

Now that you know what, why, and under what conditions we should use hooks so let's start with how we can maintain stateful logic inside react functional component using Hooks…

The syntax above is “array destructuring”.The above syntax can be decomposed internally in the following way :

Below is the code of a simple counter using React hooks. In the code we have a button that will increment the count value by one on every click.

How it works

There can be some stuff that you might want to perform after rendering a component like fetching data from API, setting up the subscription, or manipulating DOM. This stuff is called side-Effect in the hooks.In class component side effect is generally written in the componentDidUpdate() or componentDidMount() or componentWillUnmount().In functional component this is done using useEffect().

How useEffect() differs from LifeCycle methods :

1. While using the class component if we want to perform some stuff once the component is rendered then we use componentDidMount() which is called once during the mounting phase. If we want to do the same stuff each time the component re-renders then we use componentDidUpdate() which is called after re-rendering the component during the update phase and if we want to perform some clean-up activities then we use componentWillUnmount() which is called once when the DOM element unmounts.

While using useEffect(), it is called every time once the component re-renders i.e it will be called during the mounting phase as well as in updating phase each time after the component re-renders.

In the above code when useEffect() will be called it will first unsubscribe the previous value that was being returned and then it will subscribe to the new value.

Now, this is where we bind all our related code inside one method. In the above code, the cleanup phase is called, every time the useEffect() is called.

For detailed example you can refer to the official site of React JS:

Related posts:

As we approach Independence Day, and as our nation continues to grapple with its history, now is a good time to reflect on the Stars and Stripes.

Indeed the sky fools us with its miraculous colors. We all have our opinion on what the sky feels like, how it looks like. Ask a little girl about how the sky looks like and she’d reply without any…

Privacy is a massive concern for today’s technology, and it holds the spotlight within contact tracing methods especially as the world grapples with the implications of COVID-19. However, recent…