Drive Into React useState Hook

A brief introduction about React Hooks

React hook is a new feature that was introduced in February of 2019 with react sixteen point eight hooks is a really really exciting feature. It aims to replace the way that we write certain components as well as how we write our applications. Hooks are a way for us to write functional components but gain access to new functionality that was previously only available to us if we wrote class components. We can’t use hook inside the class component. We can only use them inside the functional components.

So let’s begin…

useState

useState is exactly like it sounds it allows us functional components to have access to internal state features that we could only leverage before useing class components and the way that usestate works are that it is a function that gets a parameter But before we explore what that parameter is we got to know what useState gives us back. Use state gives us back an array with two values. and in order first, to understand these two values we will actually need to first explore array destructuring.

Array destructuring

Let’s write an array that is equal to an array of three numbers.

const arr = [1, 2, 3]

if we wanted to set each of those elements in this array to a constant variable that we went to access with every single variable. we can use what’s called array destructuring. and set them like this.

const arr = [1, 2, 3]
const [one,two,three] = arr

In this snippet, we do this in the order of square brackets that we want the const variables to point to in their respective positions of the array were pointing to. So now if we console log this we’ll see that now

one = 1 , two = 2 , three = 3

const arr = [1, 2, 3]
const [one, two, three] = arr
console.log(one) // 1
console.log(two) // 2
console.log(three) // 3

So this is pretty much array destructuring. it just allows us to set variables inside of these square brackets to certain elements in an array.

Implement UseState

Step 1: First, we create a functional component.

Step2: Import Hooks.

Step3: Initialized useState Hooks.

Step4: Set state Default Value.

Step:5 Update State Value.

Step 1: First, we create a functional component.

Create a functional Component

import React from "react";
const UpdateName = () => {
const [name] = useState();
return (
<div>
<h1>Jobayer</h1>
<button>Set NickName</button>
</div>
);
};
export default UpdateName

Step2: Import Hooks.

Now at the top, we import the useState hook from React.

import React, { useState } from "react"

Step3: Initialized Hooks.

const [name, setName] = useState()

useState gives us back two parameters inside of our array. So we destructuring those two things that we get back. The first one is going to be the state value itself that we’re trying to set. Now we can name this whatever we want. But it’s pretty much going to be the variable that we want our state to hold. So here for example we’re trying to set a name into this state. so I’m set to call it a name. The second thing we get back from the state is a function that allows us to set this property and this I’m going to call setName.

Step4: Set state Default Value.

const [name, setName] = useState("Jobayer")

Now what we pass into this state is going to be the value that we want the initial value of this state. So for example we’re trying to set a string. I’m just going to set the state initial value to a string value of “Jobayer” and now I’m actually able to use these values inside of my component and ‘name’ now equal that state value.

Step:5 Update State Value.

If we wanted to change that value we just simply call our setName feature and then pass it the value we want to change this name-value too. So now I can just set it to ‘Kishoyar’.

import React, { useState } from "react"
const UseState = () => {
const [user, setUser] = useState(null)
const [searchQuery, setSearchQuery] = useState("Sfonia")
return (
<div>
<input
type="search"
value={searchQuery}
onChange={(event) => setSearchQuery(event.target.value)}
/>
{user ? (
<div>
<h3>{user.name}</h3>
<h3> {user.username} </h3>
<h3> {user.email} </h3>
</div>
) : (
<p>No user found</p>
)}
</div>
)
}
export default UseState

Now if we run our application with this code we’ll see that when I click my button it does change the state of my new functional component.

The thing about this state here is that typically if we had multiple values we would have to put them all into the same state object. For example, if we also wanted an address we would have to do it like this.