In this article I am going to discuss about useState hook in react but before that if you had not read my previous article of react installation then must read it. The useState hook in react is one of the very powerful and mostly used hook in react. With this you can easily control the flow of your react application.

Introduction to useState Hook

The state of your application is going to be changed at some point in your application. This could be the value of a variable, an object, or any type of data exists in your component. To make it possible to have the changes reflected in the DOM, we have to use a React hook called useState. State lets a component “remember” information like user input. For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index. To use the useState hook in your application you have to do three things that is discussed below :

Import useState Hook :

import { useState } from "react";

Initialize useState Hook:

import { useState } from "react";

function FavoriteColor() {
  const [name, setName] = useState("");
}

Remember you have to declare the useState Hook inside your functional component otherwise it will going to throw you an error. Now in this part we have three things firstly name which acts like variable where the value is assigned empty strings(” “) using the useState(“”). We can assign any type to variable with passing default value inside useState(). It means now in our application if we use this variable then we got “”(empty strings). If you want to see you can print the name like

console.log(name);

Second thing in useState(“”) we have defined the useState with type string you can define any type you want to use in your application like

const [value,setValue]=useState(0);

Here the type of useState is number.

Now the third thing is setName which is act like updating the variable with assigning another thing. So normally in javascript what happen is that we declare an variable and if we have to update that variable we simply assign to that variable. But in react if we have to update the variable then we have to update the setName instead of name. Like

import { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
  const [name, setName] = useState("");

  return (
    <>
      <h1>My name is {name}</h1>
      <button
        type="button"
        onClick={() => setName("Webtutorialstack")}
      >Blue</button>
    </>
  )
}

So this will update the value of name with Webtutorialstack in your application. As i told useState can hold any type like strings, numbers, booleans, arrays, objects, and any combination of these.

import React from "react";
export default function App() {

   const [state, setState] = React.useState({
   language: "React",
   years: 0
   })

function changeLanguage() {
     setState({...state, language: "React Hooks"});
}

function addYear() {
    setState(prev => {
       return {
         ...prev,
         years: prev.years + 1
      }
   })
}

return (
    <div>
      <h1 onClick={changeLanguage}>
         I've learned {state.language} for {state.years} years
      </h1>
      <button onClick={addYear}>Add Year</button>
    </div>
   );
}

Conclusion

In this react hook tutorials above is the program that explains how we can manipulate the state with an objects. In the next article am going to explain the useEffect Hook in react. Hope you found this article helpful and like this article.