Hello developers, Are you searching or Learning to know about React hooks then you are at the right place. Let's discuss about the and most commonly used useState hook in this blog post.

What are hooks

⭐ Hooks are a new addition in React 16.8. without writing the class we can change or access the state and modify other react components.

⭐ Hooks are features that allow you to “hook into” the features of React state and lifecycle from function components.

⭐ Hooks don't work inside classes they let you use React without classes. Hooks generally replace class components they help us to reduce the several lines of code and make code look short and nice

key points

● Hooks can only be called inside React function components.
● Hooks can only be called at the top level of a component.
● Hooks will not work in React class components.
● Hooks cannot be conditional

useState

To work with useState hook first we need to import it in your components as:

import React, { useState } from "react";

useState is used to store the value which used to edit or modify the code Lets know about how to declare useState hook

function App(){
  const[count] = useState(100)

return(
 <div>the variable stored is {count}</div>
)
}
export default App;

we have declared the count variable to store the value of 100 using useState which we can later use in the code.
Now we should update the hook by using update function which call by setfunction {setCount}

 import React, {useState} from "react";

function App(){
  const[count, setCount] = useState(100)
  const increment = () => setCount(count + 1)

return(
  <>
   <div>the variable stored is {count}</div>
   <button onClick={increment}>add +1</button>
 </>
 )
}
export default App;

output

From the above code when we click on button(add + 1) increment of +1 takes every time setCount is used to set the stored the increment value as stored in variable "increment"

that says function setCount(count + 1) .

Multiple State Variables

Multiple State Variables we can use many number of state variables in App.js . Let's see with example

import React, {useState} from "react";
import './App.css'

function App() {
  const[age,setAge] = useState(19);
  const[bike,setBike] = useState(2);
  const handleAge = () => setAge(age + 1 );
  const handlebike = () => setBike(bike + 1);
 return(
   <>
   I am {age}  years old. <br/>
   I have {bike} bikes. <br/>
   <button onClick={handleAge}>add age</button>
   <button onClick={handlebike}>get more bikes</button>

   </>
 )

}
export default App

output

Now create simple increment and decrement app using useState

Lets go...

As we did above for increment useState variable same we do for decrement useState variable and also add the reset button to get back to zero

import React,{ useState } from "react";
import './App.css'

function App() {
  const [count,setCount] = useState(0);
  const reset = () => setCount(0)
  const prev = () => setCount(count - 1)
  const next = () => setCount(count + 1)

return (
    <>
     <div className='count'>{count}</div>
     <button onClick={reset}>reset</button>
     <button onClick={prev}>previous</button>
     <button onClick={next}>next</button>
    </>
  );
}

export default App;

Button style imported from "./App.css"
button{
  padding: 10px;
  margin-left: 5px;
  border: none;
  background: #000;
  color: #fff;
  border-radius: 10px;
}

output

THANKS FOR READING 💐 If you found it helpfull hit a like, share on your socials "Goodbye👋"