React UseState Hook | Now in a simplified version

React useState() is a React Hook that allows us to define the initial state of a function and keep track of the state in a function component. Here, we pass in the initial state, and we get back a variable that holds the current value. This value can later be changed into whatever we want it to be.

Prerequisites

There are some concepts you should be familiar with before you dive into learning about react hooks. If you are not sure about any one of them, I would recommend you to go through that first before you come back

• Basic HTML and CSS (Complete Guide to Learning HTML5 and CSS3)
• Javascript, importing, and exporting (Javascript for Beginners)
• React Basics – How to create react app

This article will give you a complete guide to react useState(), and to do that, we’ll cover these topics today:

• What is a React Hook
• Using useState() vs just Variable
• Importing useState()
• Initializing useState()
• Making Use of the State
• Updating State

What is a React Hook

A Hook is a special function that lets you “hook into” React features. If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component, and this makes things easy for us.

With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy.

This makes it easy to share Hooks among many components or with the community.

There are many React Hooks, like useState(), useReducer(), useEffect(). But we’ll only be focusing on useState() in this article

Now that we know what hooks are, let’s look how to import react useState()

Using useState() vs just Variable

If you’re new to React, you would probably be wondering, “Why not use variables instead of going through this all this mess?”, that’s completely a valid question.

The reason is if you useState() it rerenders the view. Variables only change bits in memory and the state of your app does not change even though you update the value of the variable. Whereas for useState() every time you use the function to update the state, the page gets rerenders, giving us the updated version of the elements

In these cases, it’s best we make use of useState() in our code instead of variables since variables simply cannot do the same thing. If you’re still not sure about it, you can check it out here

Now that you know the difference between using a variable and this very react hook

Importing react useState()

For us to start using useState() hook, we first have to import it, it’s just a one-line code

import { useState } from "react";

Completely simple and straightforward, now we can make use of this hook wherever we want in the file

Now let’s see how we can initialize a state for a function using this very hook we imported

Initializing react useState()

Initializing useState() is pretty easy to understand, here, we call useState() and inside that we put in the initial state we want the function to carry. The useState() hook accepts an initial state and returns two values:

• The current State
• The function to update the state

We can store each of these returned values in 2 different variables by destructuring the returned values from useState(). How do we do that? Let’s look into it now

import { useState } from "react";

const App = () => {
    const [activeTab, setActiveTab] = useState("Tab1");
}

export default App;

Take your time to go through the code above. As you can see, first we define a constant array, with 2 variables in it, and equate it to useState() with the 5initial state “Tab1”, therefore the value of activeTab will now be “Tab1”.

Say, for instance, we build an app where there is a need to switch tabs, and we need to keep track of the active tab as the user switch from one tab to another.

We give it an initial state “Tab1”, so in the beginning, when the user gets into our page, they see the first tab.

Now that this is done, let’s look at how to make use of the state that we just defined

Making use of react useState()

As you know, useState() returns two value’s after initialization. Right now, we’re interested in the first value returned, that is, the current state. Well, it’s just an ordinary variable holding the current state of the function

import { useState } from "react";

const App = () => {
    const [activeTab, setActiveTab] = useState("Tab1");
    return (
      <>
        <p>This is {activeTab}</p>
      </>
    )
}

export default App;

And just like an ordinary variable, we can plug it into our DOM using curly braces: “{ }”. And when we run the code, we get –

Perfect! But the purpose of tabs is to switch content with the click of respective buttons. Let’s take care of that now

Updating State

Let’s now look at how to update the state of the function using useState(), so that we’re able to switch tabs by updating the state of activeTab.

To do this, first, let’s create 2 buttons – Tab1 and Tab2, that enable us to switch from tab 1 to tab2

import { useState } from "react";

const App = () => {
    const [activeTab, setActiveTab] = useState("Tab1");
    return (
      <>
        <button>Tab1</button>
        <button>Tab2</button>
        
        <p>This is {activeTab}</p>
      </>
    )
}

export default App;

And when you open your browser, you see

For this to work, let’s create onClick attributes for both the buttons

import { useState } from "react";

const App = () => {
    const [activeTab, setActiveTab] = useState("Tab1");
    return (
      <>
        <button onClick={()=>{setActiveTab('Tab1')}}>Tab1</button>
        <button onClick={()=>{setActiveTab('Tab2')}}>Tab2</button>

        <p>This is {activeTab}</p>
      </>
    )
}

export default App;

Inside the onClick attribute, let’s define a function using the ES6 Syntax, that uses the setActiveTab() function, leaving the parameters Tab1 and Tab2 respectively

What does setActiveTab() do here?

Well, setActiveTab() simply changes the state of the variable activeTab into whatever we give in as the parameter, in this case, Tab1 and Tab2 respectively.

Therefore, when the second button is clicked the value of activeTab changes to Tab2, due to which the message in the paragraph changes to This is Tab2, and so we can toggle between Tab 1 and 2 easily

In Conclusion, …

That’s basically everything there is to useState(). In today’s article, you have learned how to import, initialize and update the state of a function using react useState().

To take it a step further, we also built a webpage, where the user can switch between tabs by clicking the respective buttons, and we did this using useState(), that made our task much easier

Your next step should be to learn and master other react hooks like useReducer() and useEffect()

If you are on your way to becoming a React developer, you might find our site really helpful. Hit this link for more React.js related posts
Check it out, it’s Simply the Best Code!