🔧 Understanding useReducer in React with a Real-World Todo App Example

When managing complex state logic in a React component, useState can become limiting or messy. That's where the useReducer hook shines! Let’s explore what useReducer is, how it works, and how I used it in one of my projects to build a simple Todo app.

📌 What is useReducer? useReducer is a React hook that helps you manage complex state logic by separating state updates into a reducer function. It takes two arguments:

Let’s break this down: 1. state This holds the current state value. On the initial render, it’s set to initialState. 2. dispatch A function you call to update the state. It sends an action to the reducer, which then returns the new state. This triggers a re-render just like setState. 3. reducer A pure function that takes the current state and an action object, and returns a new state. It defines how the state should change based on the action type. 4. initialState This is the starting value of your state — it can be a number, object, array, etc. 📝 Real-Life Example: Building a Todo App with useReducer

In one of my projects, I used useReducer to manage a list of todos. It allowed me to keep the state logic clean and organized. Here’s how I set it up: ✅ Reducer Function

This todoReducer function handles two actions: add_todo: Adds a new todo item. delete_todo: Removes a todo based on its id. Each action has a type and an optional payload (the data needed to perform the update). 📦 Initial State export const todoInitialState = []; The state starts as an empty array since we’re storing a list of todos. 🧠 Using useReducer in the Component const [todoState, todoDispatch] = useReducer(todoReducer, todoInitialState);

🎯 When to Use useReducer?

Use useReducer when: State logic is complex and involves multiple sub-values. Next state depends on the previous one. You want better structure and separation of concerns in state management.

🚀 Final Thoughts useReducer makes state management more predictable and maintainable especially in apps that grow beyond a few state variables. If you're comfortable with useState, try exploring useReducer next time you build a feature like a form, shopping cart, or todo list. You’ll appreciate how it simplifies complex updates!

💬 Let me know what you think, or feel free to share how you’re using useReducer in your projects!

#React #useReducer #ReactHooks #WebDevelopment #JavaScript #Frontend #TodoApp #ReactJS