Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

77
Views
I have a useReducer state that's an object holding an array of numbers. When I try to increment one of those numbers in the reducer, it goes up by 2?

Here's my react component and my reducer function:

const testReducer = (state) => {
  const newState = {...state}
  newState.counts[0] += 1

  return newState
}

function App() {
  const [countState, dispatchCount] = useReducer(testReducer, {counts: [0]})

  return (
    <div className="App">
      <h1>{countState.counts[0]}</h1>
      <button onClick={dispatchCount}>up</button>
    </div>
  );
}

When the button is clicked and the reducer is executed, I expect the count displayed in the H1 to increment by one. This happens when the button is clicked the first time, but every subsequent click increments it by 2.

This happens no matter what the count is initialized to. If the value I'm incrementing is not in an array, it works normally.

Can anyone tell me why this is happening?

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

Issue

newState.counts[0] = += 1 isn't valid syntax. Assuming you meant newState.counts[0] += 1 then you are mutating the state object.

const testReducer = (state) => {
  const newState = {...state}
  newState.counts[0] += 1 // <-- mutates newState.counts!!

  return newState
}

In all likelihood this mutation is being exposed in your app by being rendered within a React.StrictMode component.

StrictMode - Detecting unexpected side effects

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

  • Class component constructor, render, and shouldComponentUpdate methods
  • Class component static getDerivedStateFromProps method
  • Function component bodies
  • State updater functions (the first argument to setState)
  • Functions passed to useState, useMemo, or useReducer <-- this

Solution

Even though you are shallow copying state you still need to return a new counts array reference.

const testReducer = (state) => {
  const newState = {
    ...state,
    counts: [state.counts[0] + 1]
  };

  return newState;
};

Edit i-have-a-usereducer-state-thats-an-object-holding-an-array-of-numbers-when-i-t

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs