Why useReducer hook in React Native? - Purpose & Use Cases

The Big Idea

What if you could tame your app's messy state with just one simple function?

The Scenario

Imagine you are building a mobile app with many buttons and inputs that change the app's state in different ways. You try to keep track of all these changes using many separate state variables and functions.

The Problem

This manual way quickly becomes confusing and messy. You have to write lots of code to update each piece of state, and it's easy to make mistakes or forget to update something. Your app becomes hard to understand and fix.

The Solution

The useReducer hook helps by organizing all state changes in one place. It uses a simple function to decide how the state updates based on actions. This keeps your code clean, predictable, and easier to manage.

Before vs After

✗ Before

const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);

✓ After

const reducer = (state, action) => {
  switch(action.type) {
    case 'increment': return {count: state.count + 1};
    case 'decrement': return {count: state.count - 1};
    default: return state;
  }
};
const [state, dispatch] = useReducer(reducer, {count: 0});

What It Enables

It enables you to build complex, interactive apps with clear and easy-to-follow state logic.

Real Life Example

Think of a shopping cart app where users add, remove, or update items. useReducer helps manage all these changes smoothly without tangled code.

Key Takeaways

Manual state updates get messy with many changes.

useReducer centralizes state logic in one function.

This makes your app easier to build, read, and maintain.