Working with React useState Hook

Back to: ReactJS Tutorials

React useState Hook with Examples:

In this article, I am going to discuss Working with React useState Hook with Examples. Please read our previous article where we discussed Working with State in React with Examples.

Working with React useState Hook:

In our previous article, we learned about State. State, as you can probably say by now, is a key concept in React. Now, there are a couple of things that we want to clarify about useState and about why we used a const there (for storing two elements).

Component and its Instances:

First, let’s start with one important thing, which we mentioned in the last article. UseState registers some State (some value as a State) for the component in which it is being called. And we want to be even more precise here. useState registers it for a specific component instance.

For example, In Expenses.js, ExpenseItem is used 3 times. We have 3 ExpenseItem. Every item receives its own separate State which is detached from the other States. We have one ExpenseItem definition here,

But the ExpenseItem function will be called 3 times when we create 3 ExpenseItems. And every time it’s called, a new separate State is created in the same way but managed independently by React. So, if we change the title in the first ExpenseItem the other ones are not affected because they have their State.

It’s on a per-component instance basis. So, we have separate States, even if we create a component more than once. And that’s, of course, crucial because it would be a rather undesired behavior if we change something in one item and all the other items are updated as well. So that’s a good thing.

Now, in addition, whenever State changes because we click a button, it’s only the ExpenseItem component function and only that specific instance where this component is being used and where React will re-evaluate it. If we add a console.log in the component function where we say “ExpenseItem evaluated by React”,

This will be called whenever the ExpenseItem component function is executed. And therefore, if we save it,

We can see it’s called 3 times because we’re using ExpenseItem 3 times in expenses. So, 3 separate instances of this component are being created. But if we click on the change title in one of the ExpenseItems, we will see it’s only printed once.

This is happening because of what we just explained. Only that specific instance is being updated and therefore being re-evaluated, and the other instances are not affected by that State change. And that’s important to keep in mind that State is separated on a per-component instance basis. Now there’s one other thing that could be confusing. And that’s the fact that we’re using const here.

Why we used const in React?

So, why are we using const here when we assigned a new value in setTitle in the clickHandler function?

Well, keep in mind that we’re not assigning a value with an equal sign. Instead, we call the State updating function, and the concrete value is simply managed somewhere else by React. By calling useState, we tell React that it should manage some value for us. We never see that variable itself. So, therefore, we just call a function and we never assign a new value to the title with the equal operator. And therefore, using a const is fine.

How do we get the latest title value then? Well, keep in mind that the component function is re-executed when the State is updated. And therefore,

const [title, setTitle] = useState (props.title);

This line of code will also be executed again whenever the component function is executed again. So, if we called setTitle and we assign a new title, that leads to this component being called again and therefore, the updated title is fetched from React, which manages the State for us.

We go to React and request it to give us the latest title state, and React provides us with the latest State in the array which is returned by the useState function. So, we always get a brand-new snapshot of that State when this component function re-executes. That’s how this works.

Now you might be wondering why we always overwrite any State changes with props.title again? The special thing is that React keeps track of when we call useState in a given component instance for the first time. And when we call it for the first time, it’ll take that argument as an initial value. But if a component is then re-executed because of such a state change, react will not reinitialize the State. Instead, it will detect that this State had been initialized in the past, and it will just grab the latest State which is based on some State update, and give us that State instead.

So, the initial value is only considered when this component function is being executed for the first time, for a given component instance. And we know that we have discussed a lot about State and it might be confusing to a certain extent.

It is just important to understand how State works, because if you don’t fully understand that then you will run into problems in more complex React applications where suddenly some value isn’t updated as you expected it to be. That’s why we’re explaining this in great detail.

Summary of React useState Hook:

In a nutshell, using State is simple. You just register State with useState, you always get back two values, the value itself and the updating function. Then, you call the updating function whenever the State should change, and you use that first element whenever you want to use the State value. And react will do the rest. It will re-execute the component function and re-evaluate the JSX code whenever the State changes.

The state is an important concept because it’s a State which adds reactivity to our application. Without State, our user interface would never change. But with State and with listening to events, we can make sure that we can react to user input and that such input can result in a visible change on our screen. So State is a super important concept and being able to listen to user events is also important.

In the next article, I am going to discuss Adding Form Inputs in React with Examples. Here, in this article, I try to explain working with React useState Hook with Examples. I hope you enjoy this working with React useState Hook article.