The Basics on How to Use useState

One of the best features of React is being able to use hooks, useState is one of them, and arguably one of the most important. The reason useState is so useful is that it allows for you to create a state variable and a dedicated function that can update the state of that variable at any point that it is called; upon declaration, you are also able to give it a default state.

Before doing any of that you must first import useState into your component, to do that you must scroll to the top of your component and type the following:

This will allow for the use of useState throughout a component.

After you have done this you should be able to use useState throughout your component. In order to declare a useState variable, you need to go into your desired function; you will most likely want to place it between the function declaration and the return for it:

Here a variable and its function setVariable are being declared within the Header function.

During the declaration process, you are able to set an initial state in the case that your variable is called before its dedicated function is used to update its state. To do this you will type it into the parentheses of the useState on line 7:

Now the initial state of “variable” is an h1 tag with the text “I have been declared!”.

This is what is being rendered on the page because of “variable”

Now that we have seen how to properly declare and use the state variable with its initial state, let’s try updating it using its dedicated function. Below, you will see some more logic has been added; there is a button with an onClick event handler that calls the function “change” which will then call “setVariable” in order to update “variable” to what is inside the parentheses.

Logic to update the h1 whenever the button is clicked.

This is the logic in action!

As you can see whenever the button is clicked the h1 is updated from the initial state to the updated state which is triggered by the <button> that calls the “change” function. This is only a small demonstration of useState’s usefulness but hopefully, you have a feel for the potential uses a hook like this can have.