Getting Started with React Hooks

#hooks #react #webdev #javascript

In February 2019, React Team finally announced the stable release of React (Version — 16.8.0)with React Hooks included.
In this tutorial, we will go through the basics of React Hooks. We will go through topics such as what are React Hooks and how can you start using them today.

And at the last, we will focus on how you can easily rewrite your old Components into new ones using Hooks.

What Are React Hooks?

React Hooks let you use state, and other React features without having to define a Class-Based component. It basically helps you to make your code cleaner and easier to manage. React hooks lets you simply all the react lifecycle methods and use the state and other features in a Functional Component.

According to React’s official docs

A Hook is a special function that lets you “hook into” React features.

Before hooks only React Hooks, Only Stateful Components(i.e Class-Based components ) were able to use state and we could change the state using this.setState() method.

We used different lifecycle methods like componentDidMount() , componetWillMount() , componentDidUpdate()

And a basic counter program will look something like this:

Now In the above code, we have created a basic counter variable in the state and we are updating it using setState() method.

Now there are many hooks available to use in functional component to mimic the same functionality.

Such as useState(), useEffect() , useReducer(), useContext() and there are some other uncommon ones too.
But today we will be focusing on the useState() hook.

useState()

We call it inside a function component to add a local state to it. React will preserve this state between all the re-rendering happening.
useState() returns a pair which has the current state value and a function that lets you update the value.

Here to mimic the same code we start by a simple functional component and add the hook to it.

const [count, setCount] = useState(0);

Then we have a local state count = 0 and a function setCount() we can update the value of count by passing the new value in setCount(value).

And React will automatically handle the re-rendering of the component once the state is updated.

We need to import the hook from ‘react’ in order to use it.

import React, { useState } from "react";

And now we add a function to handle the updation every time the button gets clicked.

const updateCounter = () => {    setCount(count + 1);  };

And the final code using hooks will look something like this:

The above code will yield the same result as the previous one and hence we have successfully made a component with hooks.

There are many more hooks that we have not discussed here as it was just an introduction to the topic. I will soon update another hook’s story too. Meanwhile, you can visit the official website of ReactJS to study other hooks.

Now another question arises that …

Should you rewrite every single old component using hooks?

The answer to it is probably not, Class-based components and other lifecycle methods are not going anywhere soon. You should learn hooks and try to write new components using hooks.
If you have made big projects, It won't be a very good idea to rewrite them using hooks and you can definitely add new components using hooks which will be totally fine as you can mix Class and Function components.