Examples of Complex State Management
Example 1: In this example we will handle the state of every input field of the form with the help of single useState
Folder Structure:
Example Code:
Javascript
// App.jsimport Form from "./Form/Form";function App() { return ( <div className="App"> <Form /> </div> );}export default App; |
Javascript
// Form/form.jsimport React from 'react';import useUserState from '../Form/common'function Form() { const { Data, setData } = useUserState(); const handleChange = (event) => { setData((prev) => ({ ...prev, [event.target.name]: event.target.value, })) }; const handleDetails = (event) => { setData((prev) => ({ ...prev, details: { ...prev.details, [event.target.name]: event.target.value, } })) } const handleSubmit = (e) => { e.preventDefault(); alert('Form Data Submitted'); }; return ( <div > <form style={{ display: "flex", flexDirection: "column", width: "300px", gap: "20px", padding: "20px" }}> <label> Username: </label> <input type="text" name="username" value={Data.details.username} onChange={handleDetails} /> <label> Email: </label> <input type="email" name="email" value={Data.email} onChange={handleChange} /> <label> Password: </label> <input type="password" name="password" value={Data.password} onChange={handleChange} /> <label> Age: </label> <input type="number" name="age" value={Data.details.age} onChange={handleDetails} /> <button type="submit" onClick={handleSubmit}>Submit</button> </form> </div> );}export default Form; |
Javascript
// Form/common.jsimport { useState } from 'react';const useUserState = () => { const [Data, setData] = useState({ email: '', password: '', details: { username: '', age: '', } }); return { Data, setData };};export default useUserState; |
Output –
Example 2: In this example we are managing two counter at the same sime with the help of single useState.
Folder Structure:
Folder Structure
Example Code:
Javascript
// App.jsimport Counter from "./Counter/Counter";function App() { return ( <div className="App"> <Counter /> </div> );}export default App; |
Javascript
// Counter/Counter.jsimport React from 'react';import useUserState from './common'function Counter() { const { items, setItems } = useUserState(); const updateQuantity = (itemId, newQuantity) => { setItems((prevItems) => prevItems.map((item) => item.id === itemId ? { ...item, quantity: newQuantity } : item ) ); }; return ( <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}> <div> {items[0].quantity} <br /> <button onClick={() => updateQuantity(items[0].id, items[0].quantity + 1)}>Increase</button> </div> <div> {items[1].quantity} <br /> <button onClick={() => updateQuantity(items[1].id, items[1].quantity + 1)}>Increase</button> </div> </div> );}export default Counter; |
Javascript
// Counter/common.jsimport { useState } from 'react';const useUserState = () => { const [items, setItems] = useState([ { id: 1, name: 'Nitin', quantity: 2 }, { id: 2, name: 'Sneha', quantity: 4 }, ]); return { items, setItems };};export default useUserState; |
Output:
Managing Complex State with useState
Managing the state in React applications is very important when you want to create dynamic and interactive user interfaces. In this article, we will be going to learn how we can use useState( A React Hook ) to manage the complex states in React applications we generally do it using the redux library of React ( Redux is a React library that allows us to manage to react complex state efficiently and cleanly).
Table of Content
- What is useState Hook?
- What is Complex State Management ?
- Examples of Complex State Management