Skip to main content

Understanding the Key Prop in React

Key Prop​

In React, the key prop is a special attribute used to uniquely identify elements in a list.

It plays a crucial role in optimizing the rendering process by helping React efficiently determine which items have changed, been added or removed.

The key attribute accepts either string or number and internally convert it as string type.

There will be a warning message in the console if the key prop is not present on list items.

Note: Your components won’t receive key as a prop. It’s only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: <Profile key={id} userId={id} />.


Usage​

function NumberList({ numbers }) {
  return (
    <ul>
      {numbers.map((number) => (
        <li key={number.toString()}>{number}</li>
      ))}
    </ul>
  );
}

Rules of keys​

  • Keys must be unique among siblings. However, it’s okay to use the same keys for JSX nodes in different arrays.
  • Keys must not change or that defeats their purpose! Don’t generate them while rendering.

Impact of giving array indices as key​

  1. Incorrect Rendering: When you use indexes as keys, React assumes that the item at a particular index is the same as the item that was previously at that index. However, if the items in the array change, the indexes will no longer match the correct items.

  2. Loss of state: When React re-renders a component, it uses the key to determine whether the component's state should be preserved. If the key changes, React will create a new instance of the component, losing any existing state.

Similarly, do not generate keys on the fly, e.g. with key={Math.random()}. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time.