March 12, 2025
Imagine you’re building a multi-level React app. You’ve got components nested deep within each other, and you need to pass state from the top-level component down to the bottom. You start passing props through each layer, but soon, your code becomes a mess. This is prop drilling, and it’s a common pain point in React development. Managing state this way is tedious, error-given, and hard to maintain.
What if there was a simpler, cleaner way to handle global state without relying on external libraries like Redux? Enter React useContext and useReducer. Together, they offer a lightweight, built-in solution for managing global state in React apps. In this article, you’ll learn how to use useReducer with useContext React to streamline your state management and avoid prop drilling.
Before diving into implementation, let’s break down the core concepts of useState, useReducer, and useContext. Here’s a quick comparison:
| Feature | useState | useReducer | useContext |
|---|---|---|---|
|
Best For |
Simple state |
Complex state logic |
Cross-component state
|
|
State Scope |
Local |
Local/Global |
Global
|
|
Debugging |
Basic |
Predictable actions |
Centralized access
|
useReducer is a React hook that helps you manage complex state logic. It’s inspired by Redux and works similarly. You define a reducer function that takes the current state and an action, then returns the new state. Here’s a basic example:
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case ‘increment’:
return { count: state.count + 1 };
case ‘decrement’:
return { count: state.count – 1 };
default:
throw new Error();
}
}
const [state, dispatch] = useReducer(reducer, initialState);
In this example, dispatch is used to send actions like { type: ‘increment’ } to the reducer, which updates the state.
useContext is a React hook that lets you access context values without prop drilling. Context provides a way to share data (like state) across your component tree. Here’s how you create and use context:
import { createContext, useContext } from ‘react’;
const AppContext = createContext(null);
function App() {
const value = { message: ‘Hello, World!’ };
return (
<AppContext.Provider value={value}>
<ChildComponent />
</AppContext.Provider>
);
}
function ChildComponent() {
const value = useContext(AppContext);
return <div>{value.message}</div>;
}
With useContext in React, you can get the context value right in any child component. You won’t need to pass props by manually.
Let’s see how to use useReducer and useContext in React. This guide will show you how to manage global state without prop drilling. Follow these steps to get started.
First, you need a context to hold your global state. Use createContext to create a new context:
import { createContext } from ‘react’;
export const AppContext = createContext(null);
Here, AppContext is the container for your global state. It will allow any component in your app to access the state and dispatch function.
Next, use useReducer to handle your state. Set up an initial state and a reducer function. Then, wrap your app with the context provider.
import React, { useReducer } from ‘react’;
import { AppContext } from ‘./AppContext’;
// Define initial state
const initialState = { isLoggedIn: false };
// Reducer function
function reducer(state, action) {
switch (action.type) {
case ‘LOGIN’:
return { isLoggedIn: true };
case ‘LOGOUT’:
return { isLoggedIn: false };
default:
return state;
}
}
function App({ children }) {
// useReducer hook
const [state, dispatch] = useReducer(reducer, initialState);
// Provide state and dispatch to the context
return (
<AppContext.Provider value={{ state, dispatch }}>
{children}
</AppContext.Provider>
);
}
Now, any component in your app can access the global state and dispatch actions using useContext:
import React, { useContext } from ‘react’;
import { AppContext } from ‘./AppContext’;
function LoginButton() {
// Access state and dispatch from context
const { state, dispatch } = useContext(AppContext);
return (
<button onClick={() => dispatch({ type: ‘LOGIN’ })}>
{state.isLoggedIn ? ‘Logout’ : ‘Login’}
</button>
);
}
Let’s build a simple authentication flow to demonstrate how this works in a real-world scenario.
const initialState = { isLoggedIn: false, user: null };
function reducer(state, action) {
switch (action.type) {
case ‘LOGIN’:
return { isLoggedIn: true, user: action.payload };
case ‘LOGOUT’:
return { isLoggedIn: false, user: null };
default:
return state;
}
}
function LoginButton() {
const { state, dispatch } = useContext(AppContext);
const handleLogin = () => {
dispatch({ type: ‘LOGIN’, payload: { name: ‘John Doe’ } });
};
const handleLogout = () => {
dispatch({ type: ‘LOGOUT’ });
};
return (
<div>
{state.isLoggedIn ? (
<button onClick={handleLogout}>Logout</button>
) : (
<button onClick={handleLogin}>Login</button>
)}
{state.user && <p>Welcome, {state.user.name}!</p>}
</div>
);
}
You can enhance the dispatch function to log actions for debugging:
const enhancedDispatch = (action) => {
console.log(‘Dispatching:’, action);
dispatch(action);
};
return (
<AppContext.Provider value={{ state, dispatch: enhancedDispatch }}>
{children}
</AppContext.Provider>
);
By using useReducer and useContext together, you can build a strong global state system in React. Here’s what you learned:
Once you’re comfortable with the basics of useReducer with useContext React, you can explore advanced patterns to enhance your state management.
Middleware lets you catch actions before they hit the reducer. It’s handy for logging, API calls, or custom logic. Here’s how to add a basic logging middleware:
const enhancedDispatch = (action) => {
console.log(‘Dispatching:’, action); // Log the action
dispatch(action); // Pass the action to the reducer
};
You can then provide this enhanced dispatch function to your context:
<AppContext.Provider value={{ state, dispatch: enhancedDispatch }}>
{children}
</AppContext.Provider>
When you use useContext in React, every component using the context re-renders when the state changes. To avoid extra re-renders, try React.memo or useMemo.
import React, { useContext } from ‘react’;
import { AppContext } from ‘./AppContext’;
const UserProfile = React.memo(() => {
const { state } = useContext(AppContext);
return <div>{state.user.name}</div>;
});
import React, { useContext, useMemo } from ‘react’;
import { AppContext } from ‘./AppContext’;
function UserProfile() {
const { state } = useContext(AppContext);
const memoizedProfile = useMemo(() => {
return <div>{state.user.name}</div>;
}, [state.user.name]);
return memoizedProfile;
}
Using TypeScript with your useReducer and useContext setup helps keep your code type-safe and cuts down on errors. Here’s how you can set strict types for your state and actions:
type State = { isLoggedIn: boolean };
type Action = { type: ‘LOGIN’ } | { type: ‘LOGOUT’ };
function reducer(state: State, action: Action): State {
switch (action.type) {
case ‘LOGIN’:
return { isLoggedIn: true };
case ‘LOGOUT’:
return { isLoggedIn: false };
default:
return state;
}
}
import { createContext } from ‘react’;
type AppContextType = {
state: State;
dispatch: React.Dispatch<Action>;
};
export const AppContext = createContext<AppContextType | null>(null);
By using these patterns, you can get the most out of useReducer with useContext in React. You’ll build apps that are scalable and easy to maintain.
When you use useReducer with useContext in React, you might face some common problems. Here’s how to fix them and follow best practices for smoother development:
const memoizedDispatch = useCallback((action) => {
dispatch(action);
}, []);
const initialState = { isLoggedIn: false }; // Define initial state
const [state, dispatch] = useReducer(reducer, initialState);
return (
<AppContext.Provider value={{ state, dispatch }}>
{children}
</AppContext.Provider>
);
Example with React.memo:
const UserProfile = React.memo(() => {
const { state } = useContext(AppContext);
return <div>{state.user.name}</div>;
});
const enhancedDispatch = (action) => {
console.log(‘Action:’, action);
console.log(‘Previous State:’, state);
dispatch(action);
console.log(‘Next State:’, reducer(state, action));
};
This combo is strong, but it’s not always the right fit. Avoid it in these cases:
If you’re using TypeScript, ensure your state and actions are strictly typed to avoid runtime errors:
type State = { isLoggedIn: boolean };
type Action = { type: ‘LOGIN’ } | { type: ‘LOGOUT’ };
function reducer(state: State, action: Action): State {
switch (action.type) {
case ‘LOGIN’:
return { isLoggedIn: true };
case ‘LOGOUT’:
return { isLoggedIn: false };
default:
return state;
}
}
Companies like Airbnb and Shopify use useContext and useReducer to handle shared UI parts in their apps. For instance, a design system might have reusable pieces like buttons, modals, or dropdowns. These pieces often need shared info, like theme settings (light/dark mode) or user preferences.
E-commerce apps often need to manage complex states, like a shopping cart, user login, or product filters. For example, a shopping cart’s state must be available across different parts of the app, like product pages, the cart page, and the checkout page.
Apps like insurance or banking platforms often use multi-step forms to collect your info. Each step relies on data from the previous one, and the form’s state must be shared across different parts of the app.
Managing user authentication (login, logout, session management) is a common use case for useReducer and useContext. The authentication state (e.g., logged-in user details) needs to be accessible across the entire app.
Combining useReducer and useContext in React is a great way to manage global state. It’s lightweight, scalable, and built into React, so you don’t need extra libraries like Redux. With useReducer, you can handle complex state logic in a predictable way. useContext helps you avoid prop drilling and gives you easy access to state across your app.
This approach works well in real-world apps, like enterprise systems or e-commerce platforms, where managing state across many components is key. It’s cost-efficient, simple to set up, and fits perfectly with React’s ecosystem.
If you’re new to this, start small. Try using useReducer and useContext in a simple project, like a to-do list or login flow. Once you see how it simplifies state management, you can use it in bigger apps.
Boost your productivity and grow as a developer with xlearnerdev where learning and community come together
Stay Ahead in Tech: Get Daily Insights, Tips, and Tools Delivered to Your Inbox
© 2024 xlearnerdev. All rights reserved