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;
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:
React.StrictMode andSo 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.