ReactJS | useState Hook with Example

Hello ReactJS Friends,

This tutorial will help you learn about useState Hook in ReactJS along with an example.

ReactJS added hooks in the 16.8 version which are used to perform additional features in ReactJS. Learn more about Hooks in ReactJS. There are many types of ReactJS hooks out of which ReactJS useEffect hook we have already explained.

Today we will find out What is useState Hook in ReactJS with an example.

React useState Hook

The useState hook lets you add state to function components. useState() hook in React is a hook that allows us to state variables in our functional components. The state generally refers to data or properties that need to be tracked in an application. To use the useState Hook, we first need to import it into our component. 

useState accepts an initial state and returns two values:

• The current state
• A function that updates the state

Example of ReactJS useState Hook:

import { useState } from "react";
function FavoriteColor()
{
    const [color, setColor] = useState("red");
    return (
    <>
        <h1>My favourite colou is {color}!</h1>
        <button
            type="button"
            onClick={() => setColor("blue")}
        >Blue</button>
    </>
    )
}

Conclusion:

Hope, you got a clear idea about useState Hook in ReactJS. If you have any queries, you can comment down and I will be prompt to provide you the solution. Share the ReactJS useState Hook tutorial with your ReactJS friends and stay in the know so that you do not miss any important part in learning ReactJS.

Happy Coding!