React | Hooks

Hooks are introduced in React 16.8. They allow to hook into React features such as component state and lifecycle method to be implemented in a functional component.

Previously when we have to achieve the functionalities in React like components state or lifecycle events we have to implement the class component but after hooks, they all can be achieved in a functional component without using class.

Hooks are the functions that allows to hook into the react feature such as state and lifecycle methods in a functional components.

I am discussing the following hooks in this article

• useState
• useEffect

I will also compare the class component vs functional component using hooks.

useState Hook

As the name implies that this hook can be used for doing something with state in functional component

Previously when we have to define the state in the component we can use the class component as following

Following is the simple legacy class component in which two state variables are defined and change on the event.

Now, look at how can we replicate the above class component as a functional component.

This is the replication of the class component as a functional component as you see that we are using the useState hooks to achieve the functionality of state handling in the functional component. useState returns a pair value first is the name of the variable that has to used as a state variable and second is the function to mutate the value of that variable.

useEffect Hook:

Effect is used for handling the side effect occurs to any component i-e on mounting or updating. In class components, this is achieved by using lifecycle methods and now in functional components these are achieved by effect hook.

Following is an example of a class component which updating the title of the document when the component is mount or update.

The replication of this as a functional component is

Notice that in class component we are doing the same thing in mount and update lifecycle methods which both are handled by useEffect Hook.

The next thing which comes to mind is what about componentWillUnmount lifecycle method so let's take an example that you add an event listener on mounting of the component and you have to remove it while unmounting of a component so how can we achieve this using hooks. First, take a look at the legacy class component.

In the above example, we add an event listener on mounting of a component and remove it in componentWillUnmount lifecycle method.

Let’s take a look that how it is implemented in the functional component.

Notice that using a separate effect hook for width its possible to use as many effects as you want good practice is to keep closely related things in the same effects one more thing is to be noticed that if useEffect is running in every update than events subscribe continuously so to overcome this we pass a second argument to the effect hook which is basically the array of updates it may be state or props but if it is empty meaning that the effect is only to be run at the time of mounting and if the function passes to the effect hook return a function that means that it will run when a component is unmounted.

We can also make custom hooks by using these hooks. Hooks are just the functions that give the ability to Hooks into the react features.

You may refer to the git repository for code.

GITHUB LINK

talhanousher/react-hooks

Any recommendations are welcome.

Thanks!