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
1
vote
1 answer
Cannot access updated data from useReducer hook in function defined in setTimeout
In my application, I'm using a dispatch from useReducer hook on click of a button and in the same function I'm using a setTimeout of 2 seconds. But when I store the data using dispatch of usereducer then I'm not getting updated value in setTimeout…
aadi-git
- 113
- 7
1
vote
3 answers
React infinite loop in useEffect() with reducer
I have a useEffect() that checks a trigger boolean in state if there is a message sound that should play, and after playing it sets that active message trigger to false in state.
However, the useEffect() goes into an infinite loop crashing the app.…
Ozone
- 1,337
- 9
- 18
1
vote
2 answers
How to dispatch in useEffect?
I tried to set a state using useState inside useEffect with no problem, code as follows:
import React, {useState, useEffect} from 'react';
const Banner = () => {
const [title, setTitle] = useState([]);
useEffect(() => {
async function…
one-hand-octopus
- 2,229
- 1
- 17
- 51
1
vote
0 answers
Cant seem to share useContext or useReducer between components in React
Im wanting to use useContext() and useReducer(), to strip out redux to save another package and learn a new way of state management . I've hit a blocker.
In the login page after the reducer updates the payload. Which can be seen in the screen shots…
Max Silva
- 477
- 1
- 7
- 15
1
vote
2 answers
How do I wait for a useReducer dispatch to update the state?
How can I wait for a dispatch to have updated the state? I didn't find anything in the useReducer API docs, neither do I find any indication in the TypeScript type defininition.
Here is what I have tried but did not work:
await new…
user1283776
- 19,640
- 49
- 136
- 276
1
vote
1 answer
How to handle, after state change in React context dispatch
I have a react version 16 application. The state changes are handled using React's Context, reducer concept.
To change the state and do something post that change can be handled as given below. For Example - I am in component 'Contact'. Inside this…
bijoy tv
- 148
- 2
- 8
1
vote
1 answer
React Navigation v5 Authentication Flows (Screens as Different Files)
If we see in the doc example: https://reactnavigation.org/docs/auth-flow/ :
function SignInScreen() {
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
const { signIn } =…
Jeaf Gilbert
- 11,495
- 19
- 78
- 105
1
vote
2 answers
Order of reducer execution in React
Here, it is mentioned that "can you trust React to update the state in the same order as setState is called for ... Yes". My question is that are dispatch (useReducer) events also run in the same order as they are called? For example, consider…
Shayan
- 2,758
- 7
- 36
- 55
1
vote
2 answers
How to avoid getInitialState() function used in useReducer( reducer, getInitialState() ) from running on every render?
See the snippet below.
By doing this:
React.useState(()=>getInitialState2());
You avoid running the getInitialState2() used in the useState on every render.
But that doesn't seem to work on the useReducer hook.
QUESTION
Is there a way to avoid…
cbdeveloper
- 27,898
- 37
- 155
- 336
1
vote
0 answers
Objects stored in state don't have array methods available on them
I have an applicate store setup called AppContext when the application initialises a series of API calls are performed to populate the state.
The issue I'm having is that when trying to perform Array functions such as .findIndex, .IndexOf or any…
Xavier
- 831
- 3
- 9
- 22
1
vote
2 answers
How to dynamically use useReducer when looping over a list?
I am trying to show a list of Times (e.g. 07:00, 07:30) but when a repeated time appears, show the number of repetitons by its side (e.g. 07:30, 08:00³)
As I am looping over a list, each item will need its own state so that the counter can be set…
uber
- 4,163
- 5
- 26
- 55
1
vote
1 answer
Edit data when using a custom data fetching React Hook?
I've been trying to make a chart with data fetched from an API that returns data as follows:
{
"totalAmount": 230,
"reportDate": "2020-03-05"
},
{
"totalAmount": 310,
"reportDate": "2020-03-06"
}
...
The date string is too long when…
George Huang
- 27
- 5
1
vote
0 answers
receiving an error : Check the render method of `AuthProvider`
Hi there im still new in react, I am having an issue and the error:
Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your…
Melissa
- 43
- 2
- 7
1
vote
2 answers
How can you write less, repetitive code for a useReducer hook in React?
I am creating a useReducer that, e.g., sets the price of an item.
const reducer = (state, action) => {
switch (action.type) {
case 'SET_PRICE':
return {
...state,
price: action.payload,
}
…
uber
- 4,163
- 5
- 26
- 55
1
vote
0 answers
How can I dynamically use useReducer (or another alternative) in order to prevent writing multiple, repetitive lines of code?
I am writing a program so that a business can display their services, as well as set the prices for each, according to size of item. At the 'Options' component, I am using a useReducer (where I imagine I'll have to create hundreds of 'cases' inside…
uber
- 4,163
- 5
- 26
- 55