DEV Community

React useReducer Guides

useReducer allows for custom state logic.

This is a collection of top and trending guides written by the community on subjects related to React useReducer concepts. For all things React, check out the React tag! Please contribute more posts like this to help your fellow developer in need.

React Context with useReducer and Typescript.

A reducer function receives two arguments, the first one is the state, that we are passing when using useReducer hook, and the second one is an object that represents that events and some data that will change the state (action).

Using the useReducer Hook in React with TypeScript

The useReducer hook is an alternative to the useState hook and is preferable when you have complex state logic or when your next state depends on your previous state.

The best Couple: useContext + useReducer !

This is going to be one of the best post you have ever come across in search of useContext + useReducer hooks!

React useContext and useReducer Hooks.

The useReducer hook is used for complex state manipulations and state transitions. … useReducer is a React hook function that accepts a reducer function, and an initial state. const [state, dispatch] = useReducer(reducer, initialState);This hook function returns an array with 2 values.

How to use useReducer and useContext hooks with Typescript in React

Is your components are complex with too many states and props?. its time to use useReducer and useContext hooks now to make them simple and clean.

How to use useReducer hook to mimic setState method?

This works perfectly fine. But... if you want to use terse version of this.setState method in function component (or just have some fun) you can use useReducer hook to do it.

2 use cases of the useReducer ReactJS hook

useReducer can be used to simplify the way in which multiple states impact a piece of data. In this case, adding, removing, and clearing an array can be achieved by using useReducer instead of three separate states.

React: useReducer hooks demo with nested select boxes

Here const [state, dispatch] = useReducer(reducer, initialState) I'm using useReducer function from the react which gives me back the current state and the dispatch method to trigger actions.

Flawless React State Management: useReducer and Context API

This is super helpful, we added a global state to our app! But what if we wanted to update that state? That's where the useReducer comes into the picture.

Understanding the useReducer hook in React

UseReducer is one of the additional hooks that shipped with React 16.8 . It is an alternative to useState hook and helps in managing complex state logic that involves multiple sub-values or when the next state depends on the previous one. When combined with useContext and other hooks, it can be a good alternative to redux.

Also, useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

State, Reducers, And useReducer In React

The useReducer returns a tuple [state, dispatch] and takes three arguments, reducer, initialArg, and init. Note: init is optional and used for lazy initialization - more on that in a minute.

Add debug logger when useReducer in React

A very very basic logger for the useReducer function in the React Hooks API. Inspired by redux-logger.

Debug ReactJS Context and useReducer hook with React Context Devtool

React-context-devtool is devtool for react context and useReducer hook.

Adding Dark mode to your React app with Context API and the useReducer Hook

Managing state in React can be quite tricky. Libraries like Redux make this more manageable as they only keep one source of truth (the store) that you interact with. In many cases though, this can be too complex to set up. In this tutorial I will show you how to use the React Context API together with the useReducer hook to avoid manually passing down props.

Persisting useReducer with a custom React Hook

I quickly learned that useReducer is a highly competent alternative to Redux and typing it (adding typescript types) is much more straightforward than it is with Redux. There was however one thing missing: Persistence.

Intro to React's useReducer Hook

We dive into React's useReducer hook and see how we can use it to manage complex state. We first compare useState and useReducer and slowly add on to our reducer function to make it more flexible.

You probably don't need Redux: Use React Context + useReducer hook

Dan said this way back in 2016, and now that we have React Context and useReducer hook, the use cases of redux is very minimal. In this post, we will create a good old todo list example using Context and useReducer hook.

Use of useReducer to manage state in React 💪

As we can see we use four times the Comp1 component. So we need to use useReducer four times too in order each of the Comp1 instances have its own state.

Now let's see state.js definition for the app component. It is like this:

useState vs useReducer vs XState - Part 1: Modals

This file required the same number of refactors as the useState implementation. One crucial advantage is that these refactors were mostly located together: most changes occurred inside the reducer, and the event handlers went largely untouched. For me, this gives useReducer the edge over useState.

Should you useState or useReducer 🤷? Doesn't matter really. Explained in 3 mins.

The React doc recommends useReducer for handling complex state values. But to me they are equally powerful. Let me show you how.

Create a Sticky Notes App using React useReducer Hook

React has a vast collection of hooks which makes it easier for the developers to access the props values into various components. In this app, today we will try to understand the functionality of react's useReducer hook.

The useReducer hook simply creates a store to keep track of the application state, you can then create actions to be performed (like add/delete/update) and then call those actions using the dispatch method of useReducer hook.

How the React Hook useReducer Works

But that's gonna start to break down when you have nested objects, and we want to get fancy and keep our code tight. So let's talk about useReducer. If you've ever used React Redux, some of what we're about to do might look very familiar, but if not, don't worry about it. useReducer is incredibly similar to using reduce in plain old regular Javascript.

Getting started with useReducer Hook!

-> When to useReducer v useState?

Understanding useReducer in react

The useReducer hook is very similar to the useState hook, it allows you to manage a state and rerender the component whenever your state changes, It accepts a reducer and an initial state (like the example above) and returns a new version of the state and a dispatch method based on the action performed in the reducer.

What is useReducer hook and how do you use it?

This is the second post of my React hooks series. If you haven't read the first one which covers the most basic react hook useState, check it out here. Today i am going to cover the basics of useReducer hook.

Understanding the useReducer hook in React

Building upon our React hooks introduction from our previous post on understanding React hooks (useState and useEffect), we will look at the useReducer hook in this post. useReducer hook can be an alternative to useState (in fact, useState uses useReducer internally). Before getting into how to use the useReducer hook, we should understand what is meant by a reducer.

An Introduction to React useReducer Hook

The React useReducer hook is a very good alternative to useState when you need to manage complex states with multiple values. In this tutorial, you will learn about this React hook. You will learn about how useReducer hook works. You will also learn how to use it to manage state.

The bullet proof useReducer - Typescript (2/2)

This blog post takes by granted that you are aware of useReducer logic and the basics regarding TypeScript.

A Complete Beginner's Guide to useReducer Hook

Well, yes! useState does the job pretty well.


the useState hook is limited in cases where a component needs a complex state structure and proper sync with the tree. useReducer when combined with useContext hook could behave very similarly to Redux pattern and sometimes might be a better approach for global state management instead of other unofficial libraries such as Redux.

As a matter of fact, the useReducer's API itself was used to create a simpler useState hook for state management.

The beginner's guide to the React useReducer Hook

Delivered in React 16.8 useReducer hook allows you to manage complex state logic in React Applications. The useReducer hook is an alternative for the useState hook and, combined with other interesting React’s feature called Context, helps manage state efficiently.

Mastering useReducer (1/2)

As stated in the paragraph above, the useReducer hook should be opted in when the logic behind your state is a bit more complex or depends on the previous state.

Why useReducer is acting wired ?

Has anyone who's using useReducer checked the render method after each dispatch ?? If not make a console in the JSX and check in development mode

React useReducer for dummies

So you finally start your React journey or you're just converting your apps to use functional components and you come across the useReducer hook but can't really wrap your head around it? I'll show you how in few minutes. Read on...

How to use React useReducer hook like a pro

Managing state in React is one of the main issues you'll be facing while developing React websites. useState is of course the most common way to create and manage state in (functional) React components. But do you know that useReducer can be a very powerful alternative?

Use redux-like middleware for useReducer in React

If you have used Redux before, you would be aware of the concept of middlewares. Now that useReducer has become a commonly used react hook, we might want to replicate the idea of middleware for the useReducer hook as well.

React Hooks - useState and useReducer cheat sheet - for developers who don't know Redux

I was having trouble to understand useReducer because I don't have Redux background. So I wrote this article to explain it to myself, and I hope it can help you as well.

Avoid Redux ,Build an Optimal add to cart system with UseReducer and useContext in React NEXT.js 😎

Now this is an update of our pages/_app.js file

the structure of the Reducer function has been created and and an initialState object as well .

The useReducer hook returns two values , a dispatch and a state

Using React useContext and useReducer with Typescript and Material UI

Managing data access and state management becomes an increasing challenge as projects grow. The responsibilities of loading, updating and managing data in UI components can make UI code complex and unmanageable. The most common pattern for state management in a react app is through react-redux. React's useContext and useReducer is an another approach to managing application state. (There is a comparison of react-redux with useContext and useReducer in the Resources section at the end of this document.)

Getting started with state management using useReducer and Context

In this post we will be using a combination of the useReducer hook and React Context to build our example app, as well as a quick detour to take a look at a library called React Tracked.

ReScript: Using useReducer in rescript-react

React's useReducer is great when the states get more complex than a simple value. rescript-react useReducer is even better with ReScript's variants.

React Context API & useReducer , Part 1

Today we will learn how to use React Context API to share values across our application and how to use useReducer hook to manage our states within our project.

Todo App | React 17 + Tailwindcss + useReducer + localStorage

A modo de practica decidi hacer la tipica Todo App pero usando funciones reducer y el hook useReducer de React para una manipulacion más estructurada del estado. Asi mismo, use Taildwindcss para darle estilos personalizados y la API de Local Storage para persistencia de datos en el navagador.

useCallback, useMemo, useRef, and useReducer hook

useReducer: useReducer is like the Array.prototype.reduce method in vanilla JS. The difference is that reduce method takes a reducer function and initialValue but useReducer takes the reducer function and initialState as the second parameter. Reduce method returns a single value but useReducer returns a tuple [newState, dispatch]

How to manage a complex UI state with useReducer hook instead of redux

In this post I'll explain the usage of useReducer hook with the help of other hooks, such as useEffect, useMemo, useRef, and useState to manage the complex UI state without using the redux. This post assumes that you all know the basics of hooks and how to use them. If you have not used it before I recommend you all to read the official documentation for getting started.

useState vs useReducer ultimate guide

Are you writing complex functions on useState? You should probably use useReducer instead.

Happy React useReducer coding!