Understand Why Use React “Key” Prop With Legos

React is a way for a computer to make a website that can change and update easily. When we make a list of things on a website, like a list of pictures or a list of names, React needs a way to keep track of each thing in the list so it knows what to update when something changes.

The “key” prop is like giving each thing in the list a special tag or label. Imagine you have a big box of Legos and you want to build different houses with them. You would probably sort the Legos by color and shape, and give each pile a special label like “red bricks” or “yellow blocks”.

That way, when you need to find a specific Lego, you know where to look. React uses the “key” prop in the same way. It gives each thing in the list a special label so it knows which one it should update when something changes, and so it can remember what each thing in the list is supposed to look like.

So the key prop is like a special label that React uses to keep track of the items in a list, so it can work efficiently and easily update the components.

Here’s an example of a list of names rendered using a JavaScript map function, without using the “key” prop:

const names = ['Alice', 'Bob', 'Charlie', 'David'];

function NameList() {
  return (
    <ul>
      {names.map(name => (
        <li>{name}</li>
      ))}
    </ul>
  );
}

In this example, the list of names is stored in the names array. The NameList component maps over this array, and for each name, it creates a list item (<li>) with the name. However, since we didn’t use the key prop, React can’t efficiently re-render the list when a name change, it will re-render the whole list which is not efficient.

Here’s the same example, but this time using the “key” prop:

const names = ['Alice', 'Bob', 'Charlie', 'David'];

function NameList() {
  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

In this example, I use the index of each name as the key. This gives each list item a unique label, so React knows which item to update when the name changes. Now, React can efficiently re-render the list, because it knows exactly which item is changing.

It’s important to note that using index as a key is not recommended, it’s only here for the example, keys should be unique and stable between renders. The best practice is to use unique ids that are related to the data you are displaying, like the id of the object coming from a server.

const names = [{id:1,name:'Alice'}, {id:2, name:'Bob'}, {id:3, name:'Charlie'}, {id:4, name:'David'}];

function NameList() {
  return (
    <ul>
      {names.map(({id, name}) => (
        <li key={id}>{name}</li>
      ))}
    </ul>
  );
}

In this example, I used the id property as a key, now even though the name of the person changes react will be able to efficiently re-render the list by tracking the key which is unique and stable.

In conclusion, the “key” prop is an important part of React that helps the library efficiently update and re-render lists of items. It works by giving each item in the list a unique label or “key” so that React can track which items have changed and update them accordingly. Using the “key” prop can make your React application faster and more efficient by avoiding unnecessary re-renders of items that haven’t changed. It’s important to make sure that the keys you’re using are unique and stable between renders, to ensure react can properly track which item is changing and efficiently update it.