React | Hooks

Talha nousher
Nov 28, 2020 · 3 min read
React | Hooks
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.

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.

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.

Any recommendations are welcome.

Thanks!

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Sign up for 💌 Weekly Newsletter

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorial Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Talha nousher

Written by

Bachelors in Computer science. JavaScript developer, Working as MERN stack developer. Interested in writing tech articles related to node.js and react.

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Talha nousher

Written by

Bachelors in Computer science. JavaScript developer, Working as MERN stack developer. Interested in writing tech articles related to node.js and react.

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store