How to use useReducer within a custom hook? Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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 hook:Create your custom hook: First, you define a JavaScript function that will be your custom hook. This function can have any name you want and should typically start with "use" to follow the convention. Inside this function, you'll use useReducer to manage state.Define your reducer function: Next, you'll need to define a reducer function. This function takes the current state and an action as arguments and returns the new state based on the action type.Call useReducer inside your custom hook: Within your custom hook function, you call useReducer and pass in your reducer function along with an initial state. useReducer returns the current state and a dispatch function that you can use to dispatch actions to update the state.Return state and dispatch from the custom hook: Finally, you return the current state and the dispatch function from your custom hook so that components using the hook can access them.Example: Below is an example of using useReducer within a custom hook. JavaScript import React from 'react'; import useCounter from './components/useCounter'; const CounterComponent = () => { // Use the custom hook to get state and dispatch function const { count, increment, decrement } = useCounter(0); return ( <div> <h1>Counter App</h1> <span>{count}</span><br></br> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ); }; export default CounterComponent; JavaScript import { useReducer } from 'react'; // Define your 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; } }; // Define your custom hook const useCounter = (initialCount) => { // Call useReducer inside your custom hook const [state, dispatch] = useReducer(reducer, { count: initialCount }); // Return state and dispatch from the custom hook return { count: state.count, increment: () => dispatch({ type: 'INCREMENT' }), decrement: () => dispatch({ type: 'DECREMENT' }) }; }; export default useCounter; Output: Output Comment More infoAdvertise with us Next Article How to use useReducer within a custom hook? F faheemakt6ei Follow Improve Article Tags : Web Technologies ReactJS MERN-QnA WebTech-FAQs Similar Reads How to combine useContext with useReducer? 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 co 3 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 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 What is useDeferredValue hook and how to use it? In this article, we'll be learning about useDeferredValue hook. The `useDeferredValue` hook in React allows you to postpone updating a component of the UI. This can be beneficial for boosting performance when rendering a specific section of the UI is expensive, or when you wish to prioritize renderi 4 min read How To Create a Custom Hook in React? In web application development, developers often need to reuse logic multiple times, which can become difficult to manage manually. So, the custom hook can be used to solve the problem of reusing complex stateful logic across multiple components.What are Custom Hooks?Custom Hooks are special functio 4 min read Like