Stack Overflow
Stack Overflow

Questions tagged [use-reducer]

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.

495 questions
4
votes
1 answer

Is it possible to change state without dispatch in useReducer?

I found the state.elements was changed in console, even I do not dispatch yet. What is the reason? const initialState = { elements: [['apple','banana'],['rabbit','cat']] }; function reducer(state, action) { switch (action.type) { case…
JIng Pak
  • 43
  • 4
4
votes
2 answers

How to set useReducer initial state using API response?

I'm new to React and trying to build an app with a cart feature where users can add robots to the cart. I'm using Context API to provide cart across the app and useReducer for states. The robots are being fetched from a server and load just fine.…
Tajmin
  • 353
  • 1
  • 7
  • 23
4
votes
1 answer

My state changes between the reducer and the consuming component

App purpose: The purpose of this React app is to handle scoring of a very specific dart-game. 2 players, each having to reach 33 hits in the fields 20-13, Tpl's, Dbls's and Bulls. No points, only the number of hits are counted. The hits are added…
Martin Frank Moesby Petersen
  • 61
  • 5
4
votes
2 answers

React input value not re-rendering on button change

I am building a shopping cart project. One of the features that I am trying to build for my Cart page is an input value displaying the quantity for each product in the cart (so that the user can manually adjust the number of products) as well as a…
LearningPython
  • 171
  • 9
4
votes
2 answers

is it possible to change the initial state of reducer after state changed and use it ? React

I just wanna know is it possible to use useReducer, as I use it inside UseEffect fetched data => State => useReducer(..., State) const [initialData, setInitialData] = useState({ name: 'ass' }); const [data, dispatch] = useReducer(apiReducer,…
alimkhan 7007
  • 103
  • 1
  • 5
4
votes
1 answer

useReducer + Context api + useEffect = infinite loop

I am trying to practice with useReducer and context api but when trying to execute the function that returns the data, I get an infinite loop reducer.js const initialStore = { disabledAddButton: false, disabledDelButton: false, user: null, …
Nihil
  • 41
  • 2
4
votes
2 answers

How to dispatch action in Custom Hooks by useReducer and useContext?

I created a sample for a button toggle. This is done by useContext (store the data) and useReducer (process the data). and it is working fine. Here's the CodeSandBox Link to how it works. version 1 is just dispatch when clicking the button. Then I…
SPG
  • 6,109
  • 14
  • 48
  • 79
4
votes
2 answers

Can I ignore exhaustive-deps warning for useContext?

In my react-typescript application, I am trying to use a context provider that encapsulates properties and methods and exposes them for a consumer: const StockPriceConsumer: React.FC = () => { const stockPrice = useContext(myContext); let val =…
sovo2014
  • 487
  • 7
  • 17
4
votes
2 answers

How to use useReducer instead of useState?

Hi I am having a initial state as empty object, let [value,setValue] = useState({}); function onSubmit(){ setValue({"new Object"}) } and updating it onSubmit in button click. Is there any way to implement this scenario in useReducer and also…
SDK
  • 1,356
  • 3
  • 19
  • 44
4
votes
1 answer

React Hook useReducer always running twice

I am loading data from a public API after my component is mounted. When the data is loaded I am passing it to the reducer, but it always fires twice. This is what I have: function MyComponent(props) { function reducer(data, action) { switch…
assembler
  • 3,098
  • 12
  • 43
  • 84
4
votes
2 answers

How to update 1 field only without overwriting others fields on a nested Object on React Hooks use Reducer?

I'm starting to learn React + hooks. I'm on useReducer right now. But I'm having problem to update my useReducer state. every time I want to update 1 field on my object state, all other fields will get deleted. My solution is to pass them all the…
Makopa
  • 91
  • 9
4
votes
1 answer

Strange javascript toString() behaviour

I'm trying to use toString to temporarily output a class to the DOM. I'm getting some behaviour I don't understand where the overriden toString() will always output the initial state. However, if an external function is used (i.e. stateToString) or…
bobluza
  • 131
  • 1
  • 3
3
votes
0 answers

Cannot read properties of null (reading 'useReducer') when I build my next.js application in Server Side Render page

I just build a next.js application in that I use react context and react reducer to authenticate users and this is my context code: import React from "react"; import { createContext, useContext, useReducer } from "react"; import { authConstants }…
dr_phm
  • 31
  • 3
3
votes
1 answer

React Testing Library - how to correctly test that my provider is being populated with data and the child components are displaying properly?

I have a pretty simple use case - I have a global app context where I'm trying to store data fetched from an endpoint. My goal is to load this data into the context on app load and I'm going about it using the useReducer hook. I settled on the…
Nikhil Venkatesh
  • 33
  • 3
3
votes
2 answers

Rerendering component and useReducer initialization

EDIT: below the line is the initial problem where I asked if my whole architecture was fine. I later edited the topic (and title) to go straight to what was my issue in order to help the community. Therefore, you might find what you want by jumping…
zakrapovic
  • 413
  • 3
  • 17
1
2
3
…
32 33