Pfthb

UPD: I used React Dev Tools with Highlight Updates which seems to highlight each render() method call

I've written a simple React App which works the next way:

1. It has a button and a list of numbers


2. After clicking the button it adds a new number to the bottom of the list increased by 1 from the previous one

The problem is that React updates all list elements each time even when I use key property. I know that this problem can be solved by using PureComponents class or self-implemented shouldComponentUpdate()

Why React updates all list elements if they are not changed? I though that React uses special diffing algorithm for comparing elements and it should have worked, but now I see that it works not as I expected.

Could any body explain why React's diffing algorithm doesn't work in this case?

class App extends Component 
 constructor(props) 
 super(props);

 this.state = 
 numbers: 
 

 this.handleButtonClick = this.handleButtonClick.bind(this);
 

 handleButtonClick() 
 const numbers = this.state.numbers;
 const length = this.state.numbers.length ;
 const newNumber = length > 0 ? numbers[length - 1] + 1 : 0;

 this.setState(
 numbers: [...numbers, newNumber]
 )
 

 render() 
 return (
 <div>
 <button onClick=this.handleButtonClick>Add</button>
 <NumbersList numbers=this.state.numbers />
 </div>
 );
 



class NumbersList extends Component 
 render() 
 return (
 <ul>
 
 this.props.numbers.map((number) => <NumberItem key=number number=number />)
 
 </ul>
 )
 


class NumberItem extends Component 
 render() 
 return (
 <li>this.props.number</li>
 )
 

The Javascript/React side uses shouldComponentUpdate to determine if it should rerender. This defaults to true and will rerender the component any time that there is a state change.

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Using this rerendered virtual representation of your app, it uses this https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm to reconcile your virtualDOM with the real DOM

Have you tried:

this.setState(numbers[index-1]: newNumber)?

Your code here:

this.setState(
 numbers: [...numbers, newNumber]
)

reads to me as a replacement of the numbers array and not an update of it.