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
How to update state from two different handlers using useReducer hooks from React
I'm using { useReducer } to manage my form's state. but I have two separate handlers
handleChange() = for inputs changes (this one works as expected)
const handleChange = async (e) => {
dispatch({field: e.target.name, value:…
GIlbert Lucas
- 17
- 4
0
votes
1 answer
UseReduce Hook dispatch twice-ReactJS
I develop a small application with the purpose of studying react hooks. The application consists of writing the name of an artist in a section. In the next section, a similar form, to fill with albums of each artist.
I have all my components…
David Sabillon
- 11
- 4
0
votes
1 answer
How to prevent app not to render twice? (reactjs)
I'm having a problem with displaying a totalAmount in my app. Because of a two-times rendering, it displays wrong value. I try to use useMemo hook for that.
This is how it looks like (don't bother with css :D )
So it counts like this:
7.99 * 2 +…
Marina
- 187
- 1
- 3
- 19
0
votes
0 answers
Using many useReducer to manipulate state
I'm beginner++ to React, and I encounter some issue with Hook useReducer.
I am fetching data from an API with a reducer (dataFetchReducer) with cases like this (FETCH_INIT, FETCH_SUCCESS, FETCH_FAILURE, default).
This reducer (FETCH_SUCCESS) returns…
dinker
- 1
- 1
0
votes
1 answer
Handling Complex, Multi-Layer Form Data in React - Checkboxes
I'm using the React hook useReducer to handle complex, multi-layer form data in state.
I have followed the direction from this tutorial: https://levelup.gitconnected.com/handling-complex-form-state-using-react-hooks-76ee7bc937.
In the tutorial,…
Adonis
- 115
- 2
- 8
0
votes
1 answer
State from custom hook using use reducer updates in parent but not child
I've got a custom hook using useReducer that's controlling which components are rendered on a dashboard. It works as expected in the parent, but when I'm using it in a child, useReducer runs, state is changed, but it's not changing in parent…
DoubleBridges
- 25
- 6
0
votes
4 answers
How to clear inputs after useReducer
I am using useReducer to control my 2 inputs:
const [noteInput, setNoteInput] = useReducer(
(state, newState) => ({ ...state, ...newState }),
{
title: '',
content: ''
}
);
After onClick on button i want both inputs to…
MichalBart
- 3
- 1
- 5
0
votes
1 answer
Using React's Hooks useReducer, the state is not "single source of truth"? How does the App or Sibling get the state of other components?
I tried the sample code of useReducer:
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count:…
nonopolarity
- 146,324
- 131
- 460
- 740
0
votes
1 answer
ERROR: undefined in React useContext and useReducer
I am trying to make a redux pattern with useContext and useReducer. I create a component that creates a context (a reducer), and I also have the initial values. I declare my reduction with the foregoing, and return to the child component that is…
Mauricio Brito
- 1
- 1
0
votes
2 answers
In react, we need separate reducers for each component.?
hope doing well all of you. I'm not gonna ask coding question. I start new project on react & I'm fresher. I need to know, do we need separate reducers for each component. (e.g. let say I have category component in which I'll show all categories &…
Shivam Verma
- 905
- 1
- 8
- 20
-1
votes
1 answer
prevent form submission if error with useReducer
I want to prevent a form submission event ONLY IF the form contains errors, if there isn't any, the event shouldn't be prevented.
This's my current code, it's not working because state still isn't updated when if (state.error === true) check is…
Serguei A
- 334
- 1
- 2
- 10
-1
votes
1 answer
Type 'boolean' is not assignable to type 'IArrowState'.ts(2322) in a Reducer function
I have the following code to define a React Reducer function:
import { useReducer, Reducer } from 'react';
interface IArrowState {
ascending: [
{ time: boolean },
{ user: boolean }
]
}
type ArrowAction = {
type: string;
}
const…
one-hand-octopus
- 2,229
- 1
- 17
- 51
-1
votes
1 answer
Why is my product Item not increasing or decreasing in my Reactjs
I am creating an ecommerce product website, I am trying to add product increase and decrease dispatch function to increase or decrease product in the basket. I am using useContext api with reducer method.
But its not working kindly help me check the…
Temitope Omosebi
- 1
- 1
-1
votes
2 answers
How to use/create type of array in Typescript
I have a react project, where I am creating a store. Here is the code:
import React, { useReducer, useEffect } from 'react';
import { v4 as uuid } from 'uuid';
import { Movie, MoviesAction } from 'types';
import { getMovies } from…
krickht
- 29
- 5
-1
votes
1 answer
useReducer function giving different answers with and without React strict mode
useReducer function is giving different answers with and without strict mode enabled. With strict mode enabled my count is increasing by 2 with every click and without strict mode, count increasing by 1.I understand that in strict mode the reducer…
Puneet Garg
- 1
- 2