Why use 'key' instead of passing the index as a prop to <Star />?

Question

So before seeing Guil's method I attempted to write a 'makeStars' function to generate the 5 Star components. Rather than set the 'key' I passed a prop called 'index' to the Star component. I also passed the event handler directly to Star without passing the index value.

// Write a function that returns 5 Star components
  makeStars = () => {
    let stars = [];
    let maxRating = 5;
    for(let i = 0; i < maxRating; i++) {
      stars.push(
        <Star 
          index = {i}
          selectRating = {this.handleRating}
        />
      );
    }
    return stars;
  }

Then in the Star component in the onClick function I return 'props.selectRating' and pass 'props.index + 1'.

<li onClick={ () => props.selectRating(props.index + 1) }>

This seems to work okay and is similar to the method used for the scoreboard app counter component in the React Components course. I just wondered if there was a particular reason Guil uses 'key' and passes that value in the function definition in StarRating rather than passing the index value as I've done on the Star component? Does it matter?

Answer 1 · 2019-01-11T14:23:40Z

January 11, 2019 2:23pm

Yes it does! In React when iterating on components in loops you must specify a key prop to your components. This is used by React internally to distinguish the different components and ensure that the DOM is rendered correctly. So you might be thinking why can't I just use the index of the loop as the key it unique right? Well yes you can but its generally bad practice if you can avoid it. The reason for this is because React's reconciler (the thing which determines if your virtual dom has changed) will use keys to see quickly see if anythings changed. Consider the following example:

const arr = ['amy', 'bill', 'joe'];

arr.map((name, index) => <Star key={index}>{name}</Star>);

Now lets say you add another item to the list dynamically

const arr = ['amy', 'bill', 'joe'];
arr.map((name, index) => <Star key={index}>{name}</Star>);
...
<button onClick={() => arr.unshift('David')}>Add me!</button> // ['David', 'Amy', 'bill', 'joe']

Now React's reconciler thinks that all 4 Star components have changed because the indexes in the array have all shifted down one when in reality only 1 new item has changed. React now has to re-render 4 items when actually only 1 changed!

This is why it's important to pick unique, static keys that don't change when data is mutated!

Welcome to the Treehouse Community

Looking to learn something new?

Kim Ruddock

Kim Ruddock

Why use 'key' instead of passing the index as a prop to <Star />?

1 Answer

Christian Bartram

Christian Bartram