React.js tic-tac-toe. Does `key` really work?

Question

Here is the modified version of react tic-tac-toe , CodePen Here

I've added time to the move description (only to see when li was rendered):

<li key={move}> <button onClick={() => this.jumpTo(move)}>{desc + ' ' + +new Date()}</button> </li>

Expected result: each list item has different time, since li's have key's they don't get re-rendered on each move.
What really happens: each time a move is made time on each li changes (each li is rendered). Go to game start 1512330036500 Go to move #1 1512330036500 Go to move #2 1512330036500 Go to move #3 1512330036500 Go to move #4 1512330036500 Go to move #5 1512330036500

What's wrong with my understanding of how it should behave?
Is there a way to make it work as I expect it to?

Yeah I misunderstood, the inclusion of the Date threw me off. But no, you don't want to use move as key since it just equates to the index. — lux
– lux, Commented Dec 3, 2017 at 20:21

Mario Lamacchia · Accepted Answer · 2017-12-03 20:41:55Z

With the key prop, React knows how to match an element inside a loop during the update phase, so that it doesn't re-render it if it's not necessary. Since history.map returns a different array every time, there would be no way for React to know how to match elements without a key. However, this doesn't mean that the component won't ever be re-rendered.

In your example, React is re-rendering your li because you are changing the li's children prop by using a new Date() on each iteration.

You can achieve what you are trying to do just by adding the timestamp to history, into the state: https://codepen.io/anon/pen/gXqEqb

Collectives™ on Stack Overflow

React.js tic-tac-toe. Does `key` really work?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related