How to combine useContext with useReducer? Last Updated : 28 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report Combining useContext with useReducer in React allows you to manage a global state more effectively by providing a centralized state management solution. How to combine useContext with useReducer?Create a Context: First, you need to create a context to hold your global state and provide it to your component tree. You can use the React.createContext() function for this purpose.Define a Reducer: Define a reducer function that specifies how state transitions should occur in response to dispatched actions. The reducer takes the current state and an action as arguments and returns the new state.Use useReducer Hook: Inside your component, use the useReducer hook to manage state transitions based on dispatched actions. This hook returns the current state and a dispatch function, which is used to send actions to the reducer.Use useContext Hook: Use the useContext hook to access the state and dispatch function provided by the context.Example: Below is an example of combining useContext with useReducer. We create a context called GlobalStateContext.We define a reducer function that manages state transitions for a simple counter.We use the useReducer hook inside the GlobalStateProvider component to manage the global state.We provide the state and dispatch function to the context using GlobalStateContext.Provider.We use useContext to access the state and dispatch function in the Counter component.Finally, we wrap our Counter component with the GlobalStateProvider in the App component to make the global state available to it. JavaScript import React, { createContext, useContext, useReducer } from 'react'; // Step 1: Define a context const CounterContext = createContext(); // Step 2: Define a 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; } }; /* Step 3: Create a component that provides the context and manages state with useReducer */ function CounterProvider({ children }) { const [state, dispatch] = useReducer(reducer, { count: 0 }); // Log the state whenever it changes console.log('Counter state:', state); return ( <CounterContext.Provider value={{ state, dispatch }}> {children} </CounterContext.Provider> ); } // Step 4: Create a custom // hook to access the context function useCounter() { const context = useContext(CounterContext); if (!context) { throw new Error(`useCounter must be used within a CounterProvider`); } return context; } /* Step 5: Use the custom hook to access state and dispatch actions */ function Counter() { const { state, dispatch } = useCounter(); return ( <div> <h2>Counter: {state.count}</h2> <button onClick={ () => dispatch({ type: 'increment' }) }> Increment </button> <button onClick={ () => dispatch({ type: 'decrement' }) }> Decrement </button> </div> ); } function App() { return ( <CounterProvider> <Counter /> </CounterProvider> ); } export default App; Output: Output Comment More infoAdvertise with us Next Article How to combine useContext with useReducer? F faheemakt6ei Follow Improve Article Tags : Web Technologies ReactJS MERN-QnA WebTech-FAQs Similar Reads How to use useReducer within a custom hook? useReducer is one of the fundamental built-in hooks in React, primarily used for managing complex state logic within functional components. Using useReducer within a custom hook is quite similar to using it in a regular functional component. Understanding the concept of useReducert within a custom h 2 min read How to handle complex state logic with useReducer? useReducer hook is a powerful alternative to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. It's particularly useful when the state logic involves more than just simple state updates. Handling complex state logic with 3 min read Context API with useContext Hook React Context API is a very helpful feature that enables the sharing of state across components without the need for prop drilling. It simplifies state management and makes it easier to pass data down the component tree. In this article we will explore the Context API and demonstrate how to use it w 3 min read What is the use of useReducer ? useReducer is a tool in React that helps manage the state in a more organized way. It's like a central hub where you can handle different changes to your state based on various actions. One example use case for 'useReducer' in React is managing a shopping cart state. You can use 'useReducer' to hand 6 min read How to use React Context with React-Redux ? React context with React-Redux is a popular state management library for React applications. Using React context with React-Redux is a powerful way to provide the Redux store to components deep within your component tree without manually passing it down through props. PrerequisitesNode.js and NPMRea 3 min read Like