React Hooks- useState tutorial part 1

Using classes has become a staple in React development… However, there is now another way you can use lifecycle methods and state without having to create a class, and that method is called “React Hooks”, I thought I would create a tutorial to explain what these are, how to use them, and finally give code examples of how to use them. So for this article I will be explaining “useState”.

Image for post

To begin using “hooks” within your react code you will need to import them to the file, an example of this is below.

import React, { useState } from "react";

“useState” is an example of hook that is used to implement state within a functional component. The syntax of the “useState” is this

const [stateVariable,stateFunction] = useState(defaultStateValue);

You may be familiar with the formatting of the “useState” syntax if you have dealt with destructuring, however, “useState” uses array destructuring instead of object destructuring so you can reference the state variable in the component just by referencing the variable name. In addition, you can name the stateVariable and stateFunction whatever you want as renaming is allowed with array destructuring

The first value of the array i.e. ‘stateVariable’ is the name of the state variable so an example would be ‘this.state.myCount’. In addition, the second value ‘stateFunction’ is the name of the function that takes a new value and is used to update the ‘stateVariable’ with this new value which is very similar to ‘setState’. Finally, the defaultStateValue is the default value of the state variable.

You can use the below online editor to enter your own code for react hooks.

Below are the sets of “useState” consts that I have used.

const [firstName, setFirstName] = useState("");const [lastName, setLastName] = useState("");

Two variables called “firstName” and “lastName”, in addition to two function names “setFirstName” and “setLastName” which both have default values of empty strings.

In addition, to update the state you have to run the state function defined so I have created 2 methods to set the first name and last name states, an example of this is below.

const handleFirstName = event => {setFirstName(event);};const handleLastName = event =>{setLastName(event);};

Here I have created functions that run the “useState” function names and take one parameter called “event”, this will be the value of a textInput which I will explain later.

Furthermore, the below code is all of my code I have written in between the “return” tag.

<div><inputtype="text"value={firstName}placeholder="Enter your firstname"onChange={e => handleFirstName(e.target.value)}/><p><strong>{firstName}</strong></p><inputtype="text"value={lastName}placeholder="Enter your lastname"onChange={e => handleLastName(e.target.value)}/><p><strong>{lastName}</strong></p></div>

I have defined a container div that holds two inputs of type text, which both have a value set of either “firstName” or “lastName” so they technically have a state value because where it says either “value={firstName}” or “value={lastName}” it is setting it to the value in the “useState” declaration.

In addition, I have set a “onChange” method which gets the event object which in this case is the “e” variable and then places the ‘e.target.value’ i.e. the value entered into the textbox into the parameter for the method ‘handleFirstName’ or ‘handleLastName’, this method will then run the method inside of “useState” and update the state value with the value passed into the functions “setFirstName” or “setLastName”. The component will then re-render the component with the updated state. Finally, I have also put the “firstName” and “lastName” values from the “useState” declaration inbetween “strong” tags so they show on the component, so whenever we edit the textbox contents it will show on the screen. A screenshot of this is below.

Image for post

Sorry for the quick nature of this tutorial but I am hoping to do the “react hooks” articles as part of a series so I can go more in depth with the other “react hooks” as they are incredibly useful and allow React developers to use state in components without having to write a lot of boilerplate code required with class components.

Once again I appreciate any feedback or criticism about the quality of this article and how I could improve, thank you for reading this, have a good day :).

Software Developer in the UK. With a keen passion for React Native.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store