How to use State Hook in React

As we all know after React 16.8 we can use Hooks. Hooks let you use state and other React features without writing a class. In this article, we’ll learn useState hook in react. useState is a Hook that allows you to have state variables in functional components.

We’ll guide following things in this article.

• How to declare useState hook?
• How to update useState variables value?
• How to use useState hook in react?

Let’s Started!!

Before you use useState hook you have to import/export useState from react to use it.

You can export it using following way.

saveCopyzoom_out_map
React.useState

Or Import it like this.

saveCopyzoom_out_map
import React, { useState } from 'react';

How to declare useState hook?

Use following code to declare useState

saveCopyzoom_out_map
const Mycomponent= () => {
   const [flag, setFlag]= useState(false);
   const [message, setMessage]= useState('');
}

Before release hooks we can declare state on class constructor. But now we use hooks and it's allow us to declare and use useState hook on functional component. If you want to declare more then one state variable the you have to declare it separate like above example.

How to update useState variables value?

In above code we have declare const variable with 2 arguments.

flag is a variable name and setFlag is use for update state value. Now, next we'll see how to update state value using setFlag.

saveCopyzoom_out_map
const Mycomponent = () => {
    const [flag, setFlag]= useState(false);
    const [message, setMessage]= useState('');

    return (
        <div>
        <input
            type="text"
            onChange={e => {
                    if (e.target.value) {
                        setFlag(true)
                        setMessage(e.target.value)
                    }else{
                        setFlag(flase)
                    }
                }
            }
            label="Enter your message here.."
        />
    </div>
    );
};

In above code we just update our state value on input onChange event. You can also update it on lifecycle methods or useEffect hook. Now we are going to use it.

How to use useState hook in react?

First, we declare the state variable the we have update it's value on input onChange event. Now, it's time to use those variables and display it's value. See below code I have added a full and final example of useState.

saveCopyzoom_out_map
const Mycomponent = () => {
    const [flag, setFlag]= useState(false);
    const [message, setMessage]= useState('');

    return (
        <div>
        <input
            type="text"
            onChange={e => {
                    if (e.target.value) {
                        setFlag(true)
                        setMessage(e.target.value)
                    }else{
                        setFlag(flase)
                    }
                }
            }
            label="Enter your message here.."
        />
        <p>
            <strong>{flag ? message : ''}</strong>
        </p>
    </div>
    );
};

So, finaly we use state variables in jsx. Using below code we have check the flag and display the message if flag is ture.

saveCopyzoom_out_map
<p>
    <strong>{flag ? message : ''}</strong>
</p>

That's it!!

By this way you can declare, update and use state hook in react. For more detail about useState hooks please refer this link.

I hope this tutorial helped you find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other questions.

P.S. Do share this tutorial with your team.