React re render array whereas item key has not changed

Question

Very basic code sample of a list:

class List extends React.Component {
    render() {
        const listComponent = this.props.numbers.map((number) =>
            <Item key={ number.toString() } value={ number } />,
        );

        return (
            <div>
                <button onClick={ () => this.setState({ test: 1 })}>Re-render list</button>
                { listComponent }
            </div>
        );
    }
}

An here is the item:

class Item extends React.Component {
    render() {
        return (
            <div>{ this.props.value + ', rendered time:' + new Date().getTime() }</div>
        );
    }
}

When I click the button, the state is updated so the List component is re-rendered.

However, if my understanding is correct, the items should not be re-rendered since the key item has not changed. But it does re-render since the timestamp is updated.

Can someone explain me why?

Answer 1

Your understanding is completely wrong

The whole purpose of key, is for ordering rather than rendering. Image you have items a,b,c,d and reorder them by switch a and c, i.e. c,b,a,d. Without the key, it is extremely hard for react to figure out how to transform from the old virtual DOM to new virtual DOM.

Please read this https://facebook.github.io/react/docs/lists-and-keys.html