✨ Unique Keys

Creating unique keys is essential for React list rendering.

Sources of Unique Keys

Database IDs (Preferred)

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

UUID Generation

import { v4 as uuidv4 } from "uuid";

function NoteList() {
  const [notes, setNotes] = React.useState([]);

  const addNote = () => {
    setNotes([...notes, { id: uuidv4(), text: "" }]);
  };

  return (
    <div>
      {notes.map(note => (
        <input key={note.id} defaultValue={note.text} />
      ))}
      <button onClick={addNote}>Add Note</button>
    </div>
  );
}

Combining Multiple Properties

function CommentList({ userId, comments }) {
  return (
    <ul>
      {comments.map(comment => (
        <li key={\`{userId}-{comment.timestamp}\`}>
          {comment.text}
        </li>
      ))}
    </ul>
  );
}

When NOT to Use Index

// ❌ Bad: Index changes when items reorder
{items.map((item, i) => <li key={i}>{item.text}</li>)}

// ✅ Good: Stable ID
{items.map(item => <li key={item.id}>{item.text}</li>)}

Unique vs Stable Keys

Testing Key Uniqueness

function validateKeys(items) {
  const keys = items.map(item => item.id);
  return new Set(keys).size === keys.length; // True if unique
}

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];
console.log(validateKeys(users)); // true

✅ Key Takeaways

• Use **database IDs** when available

• Generate **UUIDs** for client-side data

• Keys must be **unique** within the list

• Keys must be **stable** between renders

• Never use **index as key** (except static lists)