In React, every change in the DOM is considered as a different state; for handling those state changes, there is a hook called useState.
What is State
A way for React to remember saved values from within a component. This is similar to declaring variables from within a component, with some additional benefits.
When to use state
Anytime you want a component to maintain some values from within the component. And remember those values even when React re-renders the component.
How does It work?
let's see the working of states and useState() hook.
Importing useState hook
First, we need to import the useState hook -
import { useState } from 'react'
Now we can use it in the component in the following way-
First, we must declare the useState() hook in the component. At the declaration, the useState() hook returns an array of 2 elements, which are -
i) a state variable -> a variable whose state we want to change. We can initialize that variable inside the useState() as - useState(initialization value)
ii) a stateSetter function -> for changing the state(value) of that variable
import { useState } from 'react'
function App() {
//we can get any type of value that we want as our state variable
const numResult = useState(0);
const strResult = useState("hello");
const arrResult = useState([]);
const objResult = useState({});
const boolResult = useState(false);
console.log(numResult)
//it will print [0, f()] in the console.
}
so the first element in the array (0) is the value of our state variable and the second element is our state setter function f()
Getting Values Separately
We can separately get the variable and the function from the array by destructuring the array -
import { useState } from 'react'
function App() {
const [count, setCount] = useState(0);
const [name, setName] = useState('Saran');
}
In the above code, the count and name are the variables, and setCount and setName are the state setter functions.
Using variable and function
Now we can use these values in our react app in any way we want to use them.
Let's say we have a button and on clicking it we want to change the text of the button so we can do it in the following way-
import { useState } from 'react'
function App() {
const [text, setText] = useState('Not Clicked');
function handleClick(){
setText('Clicked')
}
return(
<button onClick={handleClick}>{text}</button>
)
//at first the button text will be 'not clicked' and after clicking it will change to 'clicked'
}
This is just an example we can do a lot more things by clicking the button using useState()
Now in the above example, the change in the state variable is not dependent upon the previous value of the variable. If the change in the state variable depends on the previous value of the variable then we have to use a call back function() inside the stateSetter() function-
Let's say we have a button and we want to increase the count of the variable we are displaying on the DOM, then the current value of the variable depends on the previous value so we have to use a callback function that takes the previous value as a parameter and change the variable according to that previous value.
In the example below, I have used an arrow function that is taking prevValue as a parameter and changing the value of the count according to that. We can also use the normal JS function.
import { useState } from 'react'
function App() {
const [count, setCount] = useState(0); //count = 0
function handleClick(){
setCount(prevCount => prevCount+1)
}
return(
<button onClick={handleClick}>{count}</button>
)
//every time button will clicked, it will increase the value of the count
}
How does It render?
Every time, when the button is clicked, it calls the handleClick function for handling the event.
Inside the handleClick functions, the setState function changes the value of the variable.
Whenever the value of the state variable changes, react Re-Renders the entire UI to the DOM with the new value of the variable and we can see the changed value of the variable.
Thanks for reading. Bye 👋