Issue

Question

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

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T10:53:31.184Z

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;
};