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👋"*