Mutate PrevState in React (setState with function)-CodePudding

Please, explain in detail why this code leads to an error. I have read the article with solution to this problem (const counters = [...prevState.counters];). But why it happens is not clear to me.

When you click the button, you see that counter is incremented two times. We expect an increment of 1. Why mutating prevState cause counter incrementing by 2???

// App.js
import React, { Component } from 'react';
import Counter from './Counter';

export default class App extends Component {
  state = {
    counters: [0, 0],
  };

  clickHandler = index => {
    this.setState((prevState, prevProps) => {
      let counter = prevState.counters[index];

      const counters = prevState.counters;
      counters[index] =   counter;
      return {
        counters,
      };
    });
  };
  render() {
    const counters = this.state.counters.map((counter, index) => (
      <Counter
        counter={counter}
        key={index}
        clickHandler={() => this.clickHandler(index)}
      />
    ));
    return <React.Fragment>{counters}</React.Fragment>;
  }
}

// Counter.js
import React from 'react';

const Counter = ({ counter, clickHandler }) => {
  return (
    <React.Fragment>
      <div>{counter}</div>
      <button onClick={clickHandler}>Increment the counter above!</button>
    </React.Fragment>
  );
};

export default Counter;

CodePudding user response：

Number 1 rule of react: DON'T MUTATE STATE.

    this.setState((prevState, prevProps) => {
      let counter = prevState.counters[index];

      const counters = prevState.counters;
      counters[index] =   counter; <-- THIS LINE MUTATES counters
      return {
        counters,
      };
    });

Should be:

    this.setState((prevState) => ({
        // return a new array with map, DON't mutate the old one
        counters: prevState.counters.map((c,i) => i === index ? c   : c);
    }));

You are seeing a double increment because:

You are using React.StrictMode and
You are mutating state.

So the point still stands, DON'T MUTATE STATE.

If you use my example with React.StrictMode, you'll see if results in a single increment. It's because the article titled "the right way" actually shows you the WRONG way.

If you use React.StrictMode and are noticing logical differences, it's because you are doing something wrong. I mentioned above what you are doing wrong, you are mutating state (like the article shows you).

Never ever ever ever ever mutate state. Always return new objects/arrays, never update existing ones.

CodePudding user response：

import React, { Component } from 'react';
import Counter from './Counter';

export default class App extends Component {
  state = {
    counters: [0, 0],
  };

  clickHandler(index) {
    let prevState = {...this.state};
    prevState.counters[index] = prevState.counters[index]   1;
    this.setState(prevState) 
  };
  render() {
    const counters = this.state.counters.map((counter, index) => (
      <Counter
        counter={counter}
        key={index}
        clickHandler={this.clickHandler.bind(this,index)}
      />
    ));
    return <React.Fragment>{counters}</React.Fragment>;
  }
}

Try this I have changed the click handler to a simple one and also changed the arrow function.

This might be easier.

Also if you are new to react try hooks(functional components) instead of class