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
0
votes
1 answer
A property of the state changed by useReducer() is never displaying changes even when those are dispatched
I have been working with useReducer() so that I can share some state among some components. There is a property in the requestReducer called isLoading which default/initial state is set to false. There are two functions dispatching actions to the…

David Galvis Sandoval
- 361
- 3
- 5
- 12
0
votes
1 answer
Using useReducer to update state
I am trying to learn react and I am always a bit confused about when react updates the state. In the following application I have a counter with plus and minus buttons and I want the counter to have one styling when the number is positive and a…

samgon
- 9
- 1
- 2
0
votes
2 answers
useEffect not triggering re-render when it's being used with useReducer
I can't trigger re-render even the state has changed. PageContainer calls loadPage and loadPage updates state without any inssue.
But when the state has changed it dose not trigger re-rendering.
It only shows inital state(pageName.loginPage). My…

Peter
- 301
- 4
- 17
0
votes
1 answer
Updating useState inside useReducer? Also my reducer is firing twice at the first dispatch called
EDIT: Link to CodeSandbox. Bug can be reproduced by clicking on any of the notes on the guitar or buttons on the TabBar. You will see the consol.logs appear twice the first time and once after.
I'm working on a project as a way to learn React. It is…

JonLunde
- 151
- 1
- 3
- 10
0
votes
0 answers
React useReducer not picking up new dispatched values from other component
I am trying to use a reducer to update a progress bar on a React/ Typescript app I am building. I am using the useReducer hook.
I have a progress bar that sits in the header which I am trying to get to 'listen' to the reducer state and rerender with…

James
- 2,800
- 7
- 45
- 81
0
votes
1 answer
Define reducer inside the component function?
Is it a valid and safe to define a reducer function inside the components' function (render phase)?
const Component = () => {
// is this okay to be here or should be outsite the function?
const reducer = (state, action) => {
// do stuff
…

mockingjay
- 181
- 1
- 10
0
votes
1 answer
How to separate a series of objects from the object
I'm using a useReducer And this is what I have:
const initialState = {
optionalFilter: {
take: Math.round((window.innerHeight - 330) / 34),
page: 1,
},
reportFilter: {
searchItem:[],
dateFilter: {
…

zahra zamani
- 1,323
- 10
- 27
0
votes
2 answers
ReactJS incrementor++ not working inside useReducer
I have a simple useReducer increment counter.
import {useReducer} from 'react'
const counterStateFn = (state,action) => {
if(action.type === "INCREMENT") {
return {count : state.count++}
}
if(action.type === "DECREMENT") {
return…

Rejin Jose
- 41
- 6
0
votes
1 answer
useReducer to edit forms with mapped data
Alright all of you React Pros out there. I have been struggling to wrap my head around this one for a while now. I have a database that has an array of objects that have arrays nested inside of them.
Initial state looks something like this...
const…

JustinMcDonald
- 1
- 1
0
votes
0 answers
Return data from Callback within Reducer
I have the following problem in a React Context:
import * as React from 'react';
export const Context = React.createContext();
function reducer (state, action) {
switch (action.type) {
case 'set': {
…

Meatgear
- 119
- 1
- 5
0
votes
0 answers
React: Comparing mount event with useEffect vs useReducer
I know the useEffect hook with an empty dependency array is the equivalent (but not the same) to the componentDidMount life cycle hook. I also know that useEffect should include all dependencies in the array, which may or may not cause additional…

Magnus Bull
- 1,027
- 1
- 10
- 21
0
votes
0 answers
Is it bad practice to nest switch statement ls in react's usereducer hook? What are preferred alternative methods?
I've been working on a react application lately and I'm using a big usereducer function to hold the global state.
I've been trying to use a sort of state machine pattern where I case on a string constant which is a name for the current state. Here's…

Hugh Haworth
- 31
- 2
0
votes
0 answers
How to use useReducers & react-router-dom
I'm trying to do some work using the useReducer hook and react-router-dom. I have 2 pages; 1) Home 2) Details. Using the react-router-dom to navigate between 2 components. The details are added to the details page. In the submit action of the…

simpywatch
- 43
- 5
0
votes
0 answers
Reactjs updating a nested array inside an array of objects with useReducer
I am having a bit of trouble and think I must be making a silly mistake that I cannot see. I am trying to make a function inside of my useReducer reducer function which updates a todo.complete value to be either true or false (this is called when…

Greg
- 35
- 1
- 2
- 6
0
votes
3 answers
Dispatchs fire together inside UseEffect with Async function
There is a Profile component that creates a 3D face using an async function. To inform the user to wait, two dispatches is fired before and after the heavy task inside the UseEffect. The problem is both of these dispatched only fire after the heavy…

Saeid
- 83
- 8