React component abstraction confusion (componentDidMount) - reactjs

Question

Using React, when we render a list of items and then insert an item to that list, the newly inserted item does not trigger componentDidMount
class Item extends React.Component {
componentDidMount() {
console.log(this.props.i)
}
render() {
return (<div>something</div>)
}
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = {items: []}
this.prependItem = this.prependItem.bind(this)
}
prependItem() {
this.setState(prevState => {
return {items: [0, ...prevState.items]}
})
}
render() {
const {items} = this.state
return (
<div className="App">
<button onClick={() => this.prependItem()}>+</button>
{items.map((item, index) => {
return (<Item key={index} i={index}/>)
})}
</div>
);
}
}
Using the above code, a natural expectation would be '0' whenever the button is clicked, but in truth the output is 0, 1, 2, 3, 4, ...
Essentially, the newly inserted item is treated as if it is exactly the same object as the previous item with that index, which can be unintuitive at times.
I guess a more direct question may be, how would I prepend an item to a list properly so that the componentDidMount for the new item (not the rest) would be triggered?

Answer 1

Let's start with React's approach. It renders Virtual DOM and next compares it with real DOM to realize what element to update, what to delete and what to create.
React does not know your intention and to be stable/predictable it should be really straightforward. So React operates on 2 things: type(it's tag on browser level or component name in JSX) and key prop.
Once both match - component will be updated. If any differs - and no other matches - then it will be delete + create.
There is really complete article on reconciliation in ReactJS docs.
When you use key={index} and add element to the very beginning it ends up with updating all the elements except last one(since there was no component with such a key in DOM yet). And only last element is created while others are updated. Including that you've just inserted.
Also it should explain why use some random data for key is bad idea: you will never predict what component is updated or if random data is unique over the time all the component will be deleted and re-created on each render cycle. It'd be bottleneck for performance.
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function Item({ i }) {
const inintialI = useRef(i);
console.log(`rendered ${i}; initially it was ${initialI.current}`);
useEffect(() => {
console.log(`created for ${i}`);
return (() => {
console.log(`deleted for ${i}`);
})
}, []);
return <li>{i}</li>;
}
function App() {
const [items, addItems] = useState([]);
return (
<React.Fragment>
<button onClick={() => addItems(items => [items.length, ...items])}>
+
</button>
<ul>
{items.map((i, index) => (
<Item key={index} i={i} />
))}
</ul>
</React.Fragment>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here is short snippet(at codesandbox) that output in console when component is created and updated. So important things we are easier to ensure:
React.Component renders each time parent renders
with key={index} we will always re-created last item while we actually insert item into list at index #0.
all other items not only are re-rendered but actually are updated that is not good for perfomance