Frontend Fundamentals | Part 2: Why key={index} Is Dangerous in React

The Subtle Bug in Your Code Review

During code reviews, one of the most common anti-patterns I consistently see is:

{users.map((user, index) => (
  <UserCard key={index} user={user} />
))}

It seems innocent at first. React stops complaining with console warnings, and the list renders fine. But what happens when items are dynamically reordered or removed?

How React Reconciliation Works

React uses the key prop to determine whether a DOM element can be reused across renders or if it needs to be unmounted:

1. 1When you delete the first user from a list of three, the previous index 0 is removed.
2. 2The item previously at index 1 now inherits index 0!
3. 3React looks at the key (0) and assumes: "This is the exact same component from the previous render; I will reuse its existing internal DOM state!"

The Disaster: Corrupted Input States

If your card contains an active input or checkbox:

• User deletes John.
• John's typed text remains stuck inside Alice's input box!
• Animations break and performance degrades.

Always assign a unique, stable business identifier (such as user.id) to safeguard component state integrity.