In this article, we will learn more about how to handle state management in react functional component with examples.
To handle the state management in react functional components we use the useState hook. It allows you to declare a state variable and provides a way to update that variable within your component. Here's how you can use the useState hook with an example:
Update state using a function callback
import React, { useState } from 'react'
function Counter() {
// Declare a state variable named "count" with an initial value of 0.
const [count, setCount] = useState(0);
// Event handler to increment the count when a button is clicked.
const countIncrement = () => {
setCount((prevCount) => prevCount + 1)
};
// Event handler to decrement the count when a button is clicked.
const countDecrement = () => {
setCount((prevCount) => prevCount - 1)
};
return (
<div>
<h1>Counter Example</h1>
<p>Count: {count}</p>
<button onClick={countIncrement}>Increment</button>
<button onClick={countDecrement}>Decrement</button>
</div>
);
}
export default Counter
Update Objects and Arrays in state management
You can use useState with complex data types like objects or arrays to manage more structured state.
Update Objects Example:
import React, { useState } from 'react'
function Employee() {
const [user, setUser] = useState({ name: '', age: 0 });
// To update name property in the user object
const nameChange = (newName) => {
setUser({ ...user, name: newName });
};
// To update age property in the user object
const ageChange = (newAge) => {
setUser({ ...user, age: newAge });
};
return (
<div>
<h1>Employee Example</h1>
<input
value={user.name}
onChange={e => nameChange(e.target.value)}
/>
<input
value={user.age}
onChange={e => ageChange(e.target.value)}
/>
</div>
)
}
export default Employee
Using Arrays Example
import React, { useState } from 'react'
function User() {
const [user, setUser] = useState({ name: '', age: 0 })
const [userList, setUserList] = useState([])
// To add a new user to the empList array
const addUser = (newUser) => {
setUserList([...userList, newUser]);
}
// To update name property in the user object
const nameChange = (newName) => {
setUser({ ...user, name: newName });
};
// To update age property in the user object
const ageChange = (newAge) => {
setUser({ ...user, age: newAge });
};
return (
<div>
<h1>Employee Example</h1>
<input
value={user.name}
onChange={e => nameChange(e.target.value)}
/>
<input
value={user.age}
onChange={e => ageChange(e.target.value)}
/>
<button onClick={addUser(user)}>Add User</button>
</div>
)
}
export default User
Using useReducer
You can consider using the useReducer hook to handle complex state management, . It's particularly useful when your state transitions become more complex or when you need to maintain multiple related pieces of state.
import { useReducer } from 'react'
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
};
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}
export default Counter
Using Custom Hooks
You can create your own custom hooks that can be used in useState or useReducer to encapsulate complex state logic and reuse it across components.
import { useState } from 'react';
function useCounter(initialCount) {
const [count, setCount] = useState(initialCount);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return { count, increment, decrement };
}
// Then, you can use this custom hook in multiple components
function Counter() {
const { count, increment, decrement } = useCounter(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export default Counter
0 Comments