WORKING WITH USESTATE()

If you ever worked with React you probably heard of and worked with the useState hook, if you haven't that's okay, I'm going to give a brief overview of the useState() hook and how to use it.

What is useState()

UseState() is a hook used with the react library that allows users to hold a value or a set of values in a 'state' variable which you can change and pass down to children components. Instead of having to create numerous variables for every time you need a different value for your single page application, you can just set up state variables for what you need, which reduces the amount of variables you would need to create.

Getting Started with useState()

So first you have to import useState() into your component. Placement of the useState hook matters and usually is used in the parent component of the other components you want to have data passed down to. To import the useState() hook to use for your app, enter the following:

Creating 'state' variables with useState()

When creating a state variable with the useState() hook, there's a naming convention for creating them. The first parameter for a state variable is the name of the state variable and the second is the setter function which is has is named after the first parameter but has 'set' in front of it and is camel cased.

The image shown above is an example of creating two state variables. You can see that the first state variable , the first parameter is called 'name' and the second parameter is 'setName' which is the setter function.
In the example above, both the 'age' and 'name' are initialized as empty variables but you can initialize your state variables with any data type.
With the initial render of a state variable it gets the value it is initialized with but once you change the state variable value via the setter function it will no longer equal the initialized value unless specified by user with the setter function.

Setting and using 'state' variables

An example of changing the value or setting it via the setter function is shown below:

In the example above, the name 'state' variable is set to "Bob Walker" and age is set to the integer value of '26'. Now that the state variables have a value, you can use them for application. If you 'console.log', 'name' or 'age' you would get the values shown above in the example which is "Bob Walker" for name and the integer 26 for 'age'.

Why use the useState() hook

Using the useState() hook allows users to store data in 'state' variables which can be changed throughout the application. When a state variable changes, the component with the state variable is re-rendered and the change is shown instantly in the application. Using useState() also allows you to create controlled forms, in which form elements have their data stored within 'state' variables, and this allows a user to use a state variable multiple times and as much as they want, and having changes in the state variables shown in the application instantly. Using regular variables instead of 'state' variables, whenever a variable is changed, the application doesn't pick up on it and may not show that change immediately. The 'state' variables give components a spot to store data and reflect change when in the app instantly.

There is more to useState() that you can find on the web on such places such as

, but that is a brief overview of useState(). Thank you for reading!