If we have been using functional components for some time, we must have known how important useState hook is and how it makes our life easier. But do we know, exactly why we need it in functional components? if really there is no alternative to react hooks or not? 🤔
Let's take an example.
Suppose there is one heading in our web interface and we want to change the header upon clicking it. We want the change to be visible on UI. Let's try this without using any hook and see if that's possible. First, we create one functional component, inside that we put the JSX part. A heading and a button just below this to change the heading. We use an event handler for that.
import React from "react";
const Example = (props) => {
let title = props.title;
const changeTitle =()=>
{
title = 'New Title';
console.log(title);
}
return (
<div>
<h1>props.title</h1>
<Button onClick ={changeTitle}>Change the title</Button>
</div>
);
};
export default Example;
The title is provided to the Example functional component through props feature and at first we print the title on page and then click the button to see if there is any change visible. Inside the event handler function, we change the value of title. If we run this , we will see no change in title on our page. You may at first think if the event handler function is not being rendered properly, but we have used the console.log method to test this and it works just fine if you check the console giving the latest updated value of title.
So why the change in title is not visible? 🤷♂️
Well, if you look closely, when you click the button, the control of the program goes to the changeTitle function and there the value of the title is updated, but in order to make the change visible on page, we need the control to go to the props.title part inside header tags. And that is possible if and only if the functional component is rendered again which is not happening here.
Now we have to understand how functional components work in React JS . Basically, functional components are a type of function and in order to render them again you need to call them. But here, it is only called when the component is declared i.e. at the beginning of the page reloading.
So we need something that would cause the functional component to render again upon value change so that the control of the program again goes to the
props.title inside header tags
part and makes the change visible on page.
Here comes the need of useState hook. So how does useState help us to solve this problem?🤨
Basically, useState is a function imported from React library that allows the functional components to declare variables as state and update them as required. You pass the initial state to this function and it returns a variable with the current state value (not necessarily the initial state) and another function to update this value. useState is managed by React library somewhere in the memory and not only it updates the state variable value but whenever the state is updated, it causes the functional component it is declared in, to re render. This is where the importance of useState hook lies.
Let's try to fix our problem using useState hook-
import React,{useState} from "react";
const Example= (props) => {
const [title,setTitle] = useState(props.title);
const changeTitle =()=>
{
setTitle("New Title");
console.log(title);
}
return (
<div>
<h1>props.title</h1>
<Button onClick={changeTitle}>Change the title</Button>
</div>
);
};
export default Example;
In the above code snippet, upon clicking the button, the changeTitle function is being called. Inside this function, the state variable title is updated through setTitle function, as stated before, whenever state variable is updated , the entire functional component is rendered again, and so when you click the button, the title is changed and it shows on UI.
This is why we need useState hook in our functional components. I tried my best to explain it. Hope it helped.
Thank you !! 😊