?? Mastering React Hooks: A Beginner's Guide to useReducer

?? Promo:

Since we discussed how to store data with and without triggering re-renders using useState and useRef, now we’ll see how we can manage multiple pieces of state together efficiently using useReducer.

When managing complex state logic in React, the useReducer hook is a powerful alternative to useState. It’s especially useful for managing multiple pieces of state or when state updates depend on previous values. Let’s dive into how useReducer works and why it can be the right tool for your React projects.

?? What is useReducer?

useReducer is a hook that helps manage complex state logic by breaking state updates into actions and a reducer function. It’s ideal for cases where useState can become overwhelming, like when you have many state transitions or need to centralize state management.

The basic syntax:

const [state, dispatch] = useReducer(reducer, initialState);        

Here’s a simple example:

import React, { useReducer } from 'react';

// Define the reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

// Initialize the initial state
const initialState = { count: 0 };

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>
  );
}        

?? Breakdown:

• reducer: A function that determines how the state changes based on the action received.
• state: The current state object.
• dispatch: A function that triggers state transitions by sending actions to the reducer.
• initialState: The initial value of your state, often an object.

? Important Concepts to Master:

• Action-based State Updates Instead of directly updating state like with useState, useReducer uses actions to determine what should happen to the state. The reducer function manages how to transition state based on the action type.
• Centralized State Logic With useReducer, all your state transition logic is centralized in the reducer function, making the code easier to reason about:

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }; // Correct: centralized logic in the reducer
    default:
      return state;
  }
};        

• Avoiding Redundant Code Using useState for complex state management can lead to repetitive logic, which useReducer simplifies by handling actions in a switch statement:

const [count, setCount] = useState(0); 
// ? Wrong: state logic is scattered and hard to maintain

setCount(count + 1); 
setCount(count - 1);

// ? Correct: state logic is handled in one place in `useReducer`
dispatch({ type: 'increment' });
dispatch({ type: 'decrement' });        

When to Use useReducer useReducer is best for situations where:

1. Your state transitions depend on the previous state.
2. You have multiple state variables that influence one another.
3. You want to maintain complex state logic in a single location.

Initial State with Lazy Initialization

Like useState, useReducer supports lazy initialization, where the initial state is computed with a function:

const [state, dispatch] = useReducer(reducer, 0, init => ({ count: init }));        

Using Multiple Reducers

In more complex applications, you can use multiple useReducer calls to manage different parts of the state independently:

const [state1, dispatch1] = useReducer(reducer1, initialState1);
const [state2, dispatch2] = useReducer(reducer2, initialState2);        

???? Practical Example: Managing a Todo List

Let’s take an example where we use useReducer to manage a todo list:

function todosReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, { id: Date.now(), text: action.payload }];
    case 'remove':
      return state.filter(todo => todo.id !== action.payload);
    default:
      return state;
  }
}

function TodoApp() {
  const [todos, dispatch] = useReducer(todosReducer, []);
  const [text, setText] = useState('');

  const handleAddTodo = () => {
    dispatch({ type: 'add', payload: text });
    setText(''); // Reset input after adding a todo
  };

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => dispatch({ type: 'remove', payload: todo.id })}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}        

In this example, we manage the list of todos with useReducer. The add and remove actions allow us to modify the todo list based on user input, centralizing the state management logic.

?? Conclusion:

useReducer is a powerful hook for managing complex state logic in React. It is especially useful for handling multiple related pieces of state and centralizing state transitions. For larger applications where state management grows, useReducer can provide cleaner and more maintainable code.

?? Tip: Use useReducer when you have multiple, interdependent state updates or more complex state logic. Happy coding!

?? What Next:

Now that we know how to manage multiple states inside a component, what if we need to have some common store that can be accessed by sibling components? Can you guess the hook that will help with this? Stay tuned to find out!