"The useReducer
hook offers a powerful and flexible approach to state management in React components. useReducer
is a React hook that provides an alternative approach to managing state compared to the commonly used useState
hook. It can replace useState
for complex state management, simplifying our lives."
useState | useReducer |
---|---|
Simpler, ideal for basic state management. | Can be used when maintaining state with useState becomes hard. |
Less boilerplate and simple syntax. | Handles complex state updates with clear patterns. |
Suitable for managing a single independent state. | Organizes large components with better separation of concerns. |
Let's start by creating a simple counter component using the useReducer
hook. We'll build a counter that can be incremented, decremented, and reset to zero.
Importing the necessary dependencies:
import React, { useReducer } from "react";
Define the initial state for your counter. In this case, I'll start with a count of 0:
const initialState = { count: 0 };
Create a reducer function that takes the current state and an action as parameters. The reducer will update the state based on the action type:
const reducer = (state, action) => {
switch (action.type) {
case "INCREMENT":
return { count: state.count + 1 };
case "DECREMENT":
return { count: state.count - 1 };
case "RESET":
return { count: 0 };
default:
return state;
}
};
Define your component function (Counter) that will render the counter and handle state updates:
export function Counter() {
// Initialize state and dispatch using useReducer
const [state, dispatch] = useReducer(reducer, initialState);
// Render the counter, buttons
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
<button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
<button onClick={() => dispatch({ type: "RESET" })}>Reset</button>
</div>
);
}
Import and use the Counter component in App.js
import React from "react";
import Counter from "./Counter";
function App() {
return (
<div>
<h1>Counter Example using useReducer</h1>
<Counter />
</div>
);
}
export default App;