For questions regarding the `useReducer` hook in React. `useReducer` is an alternative way to manage complex state by defining a reducer function that creates the next state based on the current state and a dispatched action.
Questions tagged [use-reducer]
495 questions
36
votes
4 answers
What's the purpose of the 3rd argument in useReducer?
From the docs:
[init, the 3d argument] lets you extract the logic for calculating the initial state outside the reducer. This is also handy for resetting the state later in response to an action.
And the code:
function init(initialCount) {
…
Paul Razvan Berg
- 16,949
- 9
- 76
- 114
22
votes
3 answers
What advantages does useReducer actually have over useState?
I'm struggling to understand when and why exactly useReducer has advantages when compared to useState. There are many arguments out there but to me, none of them makes sense and in this post, I'm trying to apply them to a simple example.
Maybe I am…
Giraphi
- 1,383
- 1
- 11
- 26
12
votes
3 answers
Persist localStorage with useReducer
I have a mini shopping cart application that uses useState. I now want to refactor the application's state to be managed by useReducer and continue to persist data with localStorage.
I'm having trouble figuring out how to refactor, with the many…
ln09nv2
- 965
- 4
- 19
- 35
10
votes
1 answer
Does putting state and dispatch into separate context providers prevent unnecessary re-renders?
I found that in the official next.js example, state and dispatch were put info separate context providers.
What was the point of doing so? Does this practice prevent unnecessary re-renders?
export const CounterProvider = ({ children }) => {
const…
Nelson Luk
- 171
- 1
- 11
9
votes
1 answer
Sending multiple actions with useReducers dispatch function?
Is it possible to send multiple actions with a dispatch function when using the useReducer hook in react? I tried passing an array of actions to it, but that raises an unhandled runtime exception.
To be explicit, normally one would have an initial…
P4nd4b0b3r1n0
- 1,951
- 3
- 22
- 31
9
votes
1 answer
Updating useReducer 'state' using useEffect
In my application, I am using React Hooks/Context API. Now I need to assign fetched data from localStorage to initialState.carts / state.carts whenever my Provider component did mount. It would possible if useEffect supports returning objects. But…
Ebrahim Khalil Amid
- 398
- 1
- 4
- 12
9
votes
2 answers
Why is useReducer's dispatch causing re-renders?
Suppose I implement a simple global loading state like this:
// hooks/useLoading.js
import React, { createContext, useContext, useReducer } from 'react';
const Context = createContext();
const { Provider } = Context;
const initialState = {
…
adrayv
- 359
- 1
- 3
- 8
6
votes
1 answer
React-TypeScript: Expected 0 arguments, but got 1 on a useReducer
greetings im having a little of a trouble implementing an useReducer in a typeStript application, i have several mistakes (all of then on the reducer) but this one is the most commom throu the app, every single time that i call the dispatch function…
luis Colina
- 61
- 1
- 5
6
votes
3 answers
react: getting api results into a table using useReducer and functional component
I'm brand spanking new to react. I am officially done beating my head against a wall. I just can't figure this out. This is my situation:
I am trying to get the results of an API call into a table. I have the call to the API working and results…
Neo
- 115
- 1
- 8
6
votes
3 answers
Loosing component data on page refresh in react
I am working on something where I need to maintain the application level state i.e global state, I am using react hooks for that useContext and useReducer.
So what I am doing is on button click I am setting up my context and then using it thought my…
manish thakur
- 760
- 9
- 35
- 76
5
votes
5 answers
Prevent Child Rerendering if Parent is Rerendered Using Hooks
My bestSellerDummy data doesn't change, so I'd like to prevent the same Product child to be rerendered if parent rerenders. I have tried using useMemo in parent and React.memo in child but no luck, it's still showing log 'Rendering Product…
Jeaf Gilbert
- 11,495
- 19
- 78
- 105
5
votes
1 answer
Is React's useReducer is synchronous compared to asynchronous nature of useState?
I was in a impression that both useState and useReducer works similarly except the fact that we should use useReducer when the state is complex/nested objects.
But today I found a strange behavior, I was looping over an array and setting the values…
Deepak Kumar Padhy
- 4,128
- 6
- 43
- 79
5
votes
3 answers
How do I set Typescript types for useReducer useContext for the following contextapi code?
Instead of any, I wanna use proper TS types in the following code. I 'm new to react TS, pls help...
How do I set typescript types for useReducer useContext for the following context API code:
import React, {createContext, Dispatch} from…
Sushilzzz
- 527
- 5
- 20
4
votes
1 answer
How to derive Action type from mapping object for useReducer dispatch type safety?
Preamble
Typically, I'll define a reducer like below so that I have type safety with the dispatch method:
const setWhatever = (state: State, payload: Partial) => ({ ...state, ...payload });
// Maps an action type to an action handler
const…
David Horm
- 65
- 4
4
votes
5 answers
Must initializer functions for useState/useReducer be pure?
Hier is an example of a problem I encountered:
import ReactDOM from "react-dom/client";
import React, { useState, useEffect } from "react";
const App = () => {
// problematic
const [radio, setRadio] = useState(1);
useEffect(() => {
const…
Tun Huang
- 111
- 1
- 8