useState Hook in React

To handle multiple states using the useState hook in react, you can call the useState function multiple times, once for each state you want to manage. Here's an example:

import { useState } from 'react';
function MyComponent(props){
const [count,setCount] = useState(0);
const [text, setText] = useState('');
function handleIncrement(){
setCount(count + 1);
}
function handleTextChange(event){
setText(event.target.value);
}
return (
<div>
<P>Count : {count}<p>
<button onClick = {handleIncrement}>Increment</button>
<br />
<input type="text" value= {text} onChange ={handleTextChange}/>
<p> Text: {text}</p>
</div>
);}

In this example , we're managing two states using useState:count and text. We're also defining two functions : handleIncrement, which updates the count state when a button is clicked, and handleTextChange , which updates the text state when the text input changes.
By calling useState twice , we're creating two independent pieces of state that can be managed separately. We're also using destructing to assign the current value of each state and its corresponding setter and its corresponding setter function to separate variables(count and setCount, and text and setText).
Overall, using multiple useState hooks can help you manage multiple pieces of state in a clean and organized way.
Other Alternative:
We can also manage multiple states using a single useState hook by passing an object as the initial state and using destructing to access individual state variables and their corresponding update functions.
Here's an example:
import {useState} from 'react';
function MyComponent(props){
const[state, setState] = useState({count: 0, text: ''});
function handleIncrement(){
setState(
prevState => ({ ...prevState, count: prevState.count + 1})
);}
function handleTextChange(event){
setState(
prevState =>({ ...prevState, text: event.target.value}
));
}
return (
<div>
<p> Count: {state.count}</p>
<button onClick ={handleIncrement}>Increment</button>
<br/>
<input type="text"
value={state.text} onChange ={handleTextChange} />
<p>Text: {state.text}</p>
</div>);}

In this example, we're still managing two pieces of state(count and text), but we're using a single useState hook to initialize both states as properties of an object(state). We're also using destructing to access individual state variables(count and text) and their corresponding update functions(setState).

To update a piece of state, we're using the functional update form of setState, which takes a callback function that receives the previous state as an argument and returns the new state. We're spreading the previous state using the spread operator(...prevState) to create a new object with all the previous state properties, and then updating the property we want to change(count or text) using object property shorthand.

Using a single useSate hook to manage multiple pieces of state can be a convenient way to keep related state together and reduce boilerplate code. However, it can also make code more complex and harder to read, especially if you have many pieces of state or complex state updates. So it's up to you to decide which approach works best for you for your specific use case.