React Advanced

0% completed

Previous
Next
Combining useContext and useReducer Hooks

While useContext provides a way to pass data through the component tree without props drilling, and useReducer helps manage more complex state logic, together they provide a powerful combination for managing global state in a React app.

The main idea is to use useReducer to manage the state and useContext to make that state accessible throughout your component tree.

Benefits of Using useContext with useReducer

There are benefits in combining both hooks within your React app and they include:

  • Centralized State Management: You can store the state in one place, making it easy to manage and update it from different components.

  • Cleaner and More Maintainable Code: The combination reduces prop drilling and keeps your component tree clean, especially when you need to pass state through many levels of nested components.

  • Complex State Logic: The useReducer offers a way to handle complex state updates, which is helpful for larger applications with complex interactions.

Example

Let’s look at an example where we combine useReducer and useContext to manage a counter in a global context.

Step 1: Create the Context and Reducer

First, we create the context object and the reducer function that will manage the state updates.

import React, { createContext, useReducer, useContext } from 'react';

// 1. Create the context
const CounterContext = createContext();

// 2. Define the reducer function
function counterReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// 3. Create a provider component that uses useReducer
export function CounterProvider({ children }) {
  const initialState = { count: 0 };
  const [state, dispatch] = useReducer(counterReducer, initialState);

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
}

Here’s what’s happening:

  • We create a CounterContext to hold the state.
  • The counterReducer defines how the state should be updated based on different actions (INCREMENT and DECREMENT).
  • The CounterProvider component uses useReducer to create the state and dispatch function, then provides them to the rest of the app using CounterContext.Provider.

Step 2: Accessing the Context with useContext

Now, any component that needs to access or update the count state can use useContext to consume the CounterContext.

import React, { useContext } from 'react';
import { CounterContext } from './CounterProvider';

function Counter() {
  const { state, dispatch } = useContext(CounterContext);

  return (
    <div>
      <h1>Count: {state.count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

In this component:

  • We use useContext(CounterContext) to access the global state and dispatch function.
  • The dispatch function is used to send actions (INCREMENT or DECREMENT) to the reducer, which then updates the state.

Step 3: Wrapping the App with the Provider

Finally, we wrap the top-level component of the app with the CounterProvider so that all child components have access to the global state.

import React from 'react';
import { CounterProvider } from './CounterProvider';
import Counter from './Counter';

function App() {
  return (
    <CounterProvider>
      <div className="App">
        <Counter />
      </div>
    </CounterProvider>
  );
}

export default App;

Summary of Example

Having completed building our counter app using both the useContext and useReducer hooks, here is a summarized breakdown of the process:

  • Global State: The CounterProvider wraps the app, providing access to the counter state (state.count) and the dispatch function throughout the component tree.

  • State Management: The useReducer hook is used to handle state changes based on the dispatched actions (INCREMENT and DECREMENT).

  • State Access: Any component inside the CounterProvider can access and update the count state using useContext.

When to Use useContext with useReducer

Combining useContext and useReducer is particularly useful in the following scenarios:

  • Complex State Logic: If you need to manage complex state transitions or have multiple actions that affect the state, useReducer is a better option than useState. Using it with useContext makes the state accessible globally across your app.

  • Global State Management: If you have global state that needs to be shared across multiple components, using useContext with useReducer allows for easy state management without the need to pass props down manually.

  • Scalable Applications: As your app grows, the combination of useReducer for complex state logic and useContext for easy access to that state makes it easier to maintain large-scale applications.

In conclusion to this lesson, you've learnt how to combine the useContext and useReducer hooks to effectively build a React app.

.....

.....

.....

Like the course? Get enrolled and start learning!
Previous
Next