Keys & List Rendering

function FruitList() {
  const fruits = ["Apple", "Banana", "Cherry"];

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

// React creates three <li> elements:
// <li>Apple</li>
// <li>Banana</li>
// <li>Cherry</li>

// Render 1: ["Apple", "Banana", "Cherry"]
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

// Render 2: ["Mango", "Apple", "Banana", "Cherry"]
// (Mango added at the beginning)
<ul>
  <li>Mango</li>     // ← new
  <li>Apple</li>     // ← moved from position 0 to 1
  <li>Banana</li>    // ← moved from position 1 to 2
  <li>Cherry</li>    // ← moved from position 2 to 3
</ul>

// How does React know Apple "moved" vs "changed to Mango"?
// Without keys, it can't. It compares by position.
// With keys, it matches by identity.

// Keys go on the outermost element returned by .map()
function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        // key goes HERE — on the <li>, not inside UserCard
        <li key={user.id}>
          <UserCard user={user} />
        </li>
      ))}
    </ul>
  );
}

// If the component IS the outermost element:
function UserList({ users }) {
  return (
    <div>
      {users.map((user) => (
        // key goes on the component itself
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

// Keys are NOT passed as props to the component:
function UserCard({ user }) {
  // There is no props.key here — React consumes it internally
  return <div>{user.name}</div>;
}

// Without keys (or with index keys), React compares by position

// Old list:                    New list (Mango added at start):
// index 0: <li>Apple</li>     index 0: <li>Mango</li>
// index 1: <li>Banana</li>    index 1: <li>Apple</li>
// index 2: <li>Cherry</li>    index 2: <li>Banana</li>
//                              index 3: <li>Cherry</li>

// React's diff (comparing by index):
// index 0: "Apple" → "Mango"   → UPDATE text content
// index 1: "Banana" → "Apple"  → UPDATE text content
// index 2: "Cherry" → "Banana" → UPDATE text content
// index 3: (nothing) → "Cherry" → CREATE new <li>

// Result: 3 text updates + 1 creation = 4 DOM operations
// React updated EVERY existing element even though
// Apple, Banana, Cherry didn't change — they just moved.

// With unique keys, React matches by identity

// Old list:                         New list:
// key="apple":  <li>Apple</li>     key="mango":  <li>Mango</li>
// key="banana": <li>Banana</li>    key="apple":  <li>Apple</li>
// key="cherry": <li>Cherry</li>    key="banana": <li>Banana</li>
//                                   key="cherry": <li>Cherry</li>

// React's diff (matching by key):
// key="mango":  no old match       → CREATE new <li>Mango</li>
// key="apple":  found in old list  → MOVE (reuse DOM node)
// key="banana": found in old list  → MOVE (reuse DOM node)
// key="cherry": found in old list  → MOVE (reuse DOM node)

// Result: 1 creation + 3 moves = much cheaper
// Existing DOM nodes are REUSED, not recreated.
// Component state inside Apple/Banana/Cherry is PRESERVED.

Step 1: Build a Map from old children
  oldMap = {
    "apple"  → <li>Apple</li>  (fiber + DOM node),
    "banana" → <li>Banana</li> (fiber + DOM node),
    "cherry" → <li>Cherry</li> (fiber + DOM node),
  }

Step 2: Walk through new children in order
  for each newChild:
    look up newChild.key in oldMap
    │
    ├─ FOUND → Reuse the old fiber + DOM node
    │          Compare props → update if changed
    │          Remove from oldMap (it's been matched)
    │
    └─ NOT FOUND → Create new fiber + DOM node

Step 3: Delete unmatched old children
  anything left in oldMap was removed from the list
  → unmount component, remove DOM node

Step 4: Commit position changes
  move DOM nodes to match the new order

// ❌ BUG: Using index as key with stateful components

function EmailList() {
  const [emails, setEmails] = useState([
    { id: "e1", from: "Alice", subject: "Meeting tomorrow" },
    { id: "e2", from: "Bob",   subject: "Code review" },
    { id: "e3", from: "Carol", subject: "Lunch plans" },
  ]);

  const deleteEmail = (id) => {
    setEmails(emails.filter(e => e.id !== id));
  };

  return (
    <ul>
      {emails.map((email, index) => (
        // ❌ Using index as key
        <EmailRow key={index} email={email} onDelete={deleteEmail} />
      ))}
    </ul>
  );
}

function EmailRow({ email, onDelete }) {
  // Each row has an "expanded" state (user clicked to read)
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <li>
      <div onClick={() => setIsExpanded(!isExpanded)}>
        {email.from}: {email.subject}
        <button onClick={() => onDelete(email.id)}>Delete</button>
      </div>
      {isExpanded && <div className="body">Full email content...</div>}
    </li>
  );
}

// Scenario: User expands Alice's email (index 0), then deletes it.
//
// Before delete:
//   key=0: Alice (expanded=true)  ← user expanded this
//   key=1: Bob   (expanded=false)
//   key=2: Carol (expanded=false)
//
// After delete (Alice removed):
//   key=0: Bob   (expanded=true!)  ← BUG! Bob inherits Alice's state
//   key=1: Carol (expanded=false)
//
// React sees: key=0 still exists, props changed (Alice → Bob).
// It UPDATES the component but keeps the STATE (expanded=true).
// Bob's email is now expanded even though the user never clicked it.

// ✅ FIX: Using unique ID as key

<ul>
  {emails.map((email) => (
    // ✅ Stable, unique key
    <EmailRow key={email.id} email={email} onDelete={deleteEmail} />
  ))}
</ul>

// After deleting Alice (id="e1"):
//   key="e1": REMOVED → React unmounts, cleans up state
//   key="e2": Bob   (expanded=false) → unchanged, correct ✓
//   key="e3": Carol (expanded=false) → unchanged, correct ✓
//
// React sees: key="e1" is gone → delete it.
// key="e2" and key="e3" still exist → reuse, no state change.
// Bob keeps his own state. No bug.

// Index keys are tied to POSITION, not IDENTITY

// Before: ["Apple", "Banana", "Cherry"]
// key=0 → Apple
// key=1 → Banana
// key=2 → Cherry

// After removing "Apple": ["Banana", "Cherry"]
// key=0 → Banana    (was Apple!)
// key=1 → Cherry    (was Banana!)
//                    (key=2 removed — that was Cherry's key!)

// React thinks:
// - key=0 changed content (Apple → Banana) → UPDATE
// - key=1 changed content (Banana → Cherry) → UPDATE
// - key=2 disappeared → DELETE
//
// Reality:
// - Apple was deleted
// - Banana and Cherry didn't change at all
//
// React did 2 unnecessary updates + deleted the wrong element.
// If these had state (inputs, checkboxes), the state is now wrong.

// ❌ NEVER do this
{items.map(item => (
  <ListItem key={Math.random()} item={item} />
))}

// Every render generates NEW keys for EVERY item.
// React sees: all old keys gone, all new keys are fresh.
// Result: DESTROY every component and CREATE new ones.
//
// On every single render:
// - All component state is lost
// - All DOM nodes are recreated
// - All effects run cleanup + setup
// - All animations restart
// - All input focus is lost
//
// This is literally the worst possible performance —
// worse than no keys at all.

// Index keys are safe ONLY when ALL three conditions are true:

// 1. The list is static (never reordered, filtered, or sorted)
// 2. Items are never added to or removed from the middle
// 3. Items have no local state (no inputs, no checkboxes, no expanded state)

// ✅ Safe: static navigation menu
const navItems = ["Home", "About", "Contact"];
navItems.map((item, index) => (
  <NavLink key={index}>{item}</NavLink>
));

// ✅ Safe: static table headers
const headers = ["Name", "Email", "Role"];
headers.map((header, index) => (
  <th key={index}>{header}</th>
));

// ❌ NOT safe: dynamic todo list (items added/removed)
// ❌ NOT safe: sortable table rows
// ❌ NOT safe: any list with inputs or interactive elements

// Rule of thumb: if in doubt, use a unique ID. Always safe.

// ❌ BUGGY: Using index as key

function TaskList() {
  const [tasks, setTasks] = useState([
    { id: "t1", name: "Design mockups" },
    { id: "t2", name: "Write API docs" },
    { id: "t3", name: "Fix login bug" },
  ]);

  const addTask = () => {
    const newTask = { id: crypto.randomUUID(), name: "New task" };
    setTasks([newTask, ...tasks]); // Add to BEGINNING
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(t => t.id !== id));
  };

  return (
    <div>
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks.map((task, index) => (
          <TaskRow key={index} task={task} onDelete={deleteTask} />
        ))}
      </ul>
    </div>
  );
}

function TaskRow({ task, onDelete }) {
  return (
    <li>
      <span>{task.name}</span>
      <input placeholder="Add notes..." />
      <button onClick={() => onDelete(task.id)}>×</button>
    </li>
  );
}

Step 1: Initial render
  key=0: "Design mockups"  [input: empty]
  key=1: "Write API docs"  [input: empty]
  key=2: "Fix login bug"   [input: empty]

Step 2: User types "need by Friday" in the first input
  key=0: "Design mockups"  [input: "need by Friday"]  ← user typed here
  key=1: "Write API docs"  [input: empty]
  key=2: "Fix login bug"   [input: empty]

Step 3: User clicks "Add Task" (adds to beginning)
  NEW array: ["New task", "Design mockups", "Write API docs", "Fix login bug"]

  React compares by index:
  key=0: "Design mockups" → "New task"      → UPDATE text
         input state stays at key=0!
  key=1: "Write API docs" → "Design mockups" → UPDATE text
  key=2: "Fix login bug"  → "Write API docs" → UPDATE text
  key=3: (new)            → "Fix login bug"   → CREATE

  Result on screen:
  key=0: "New task"        [input: "need by Friday"]  ← BUG! Wrong input!
  key=1: "Design mockups"  [input: empty]
  key=2: "Write API docs"  [input: empty]
  key=3: "Fix login bug"   [input: empty]

  The note "need by Friday" is now on "New task" instead of "Design mockups"!
  The user's data is attached to the wrong item. 😱

// ✅ FIXED: Using unique ID as key

<ul>
  {tasks.map((task) => (
    <TaskRow key={task.id} task={task} onDelete={deleteTask} />
  ))}
</ul>

Step 1: Initial render
  key="t1": "Design mockups"  [input: empty]
  key="t2": "Write API docs"  [input: empty]
  key="t3": "Fix login bug"   [input: empty]

Step 2: User types "need by Friday" in the first input
  key="t1": "Design mockups"  [input: "need by Friday"]
  key="t2": "Write API docs"  [input: empty]
  key="t3": "Fix login bug"   [input: empty]

Step 3: User clicks "Add Task" (adds to beginning)
  NEW array: [newTask, t1, t2, t3]

  React matches by key:
  key="new-uuid": no match     → CREATE new <li>
  key="t1": found in old list  → REUSE (move to position 1)
  key="t2": found in old list  → REUSE (move to position 2)
  key="t3": found in old list  → REUSE (move to position 3)

  Result on screen:
  key="new-uuid": "New task"        [input: empty]        ← correct!
  key="t1":       "Design mockups"  [input: "need by Friday"]  ← correct!
  key="t2":       "Write API docs"  [input: empty]        ← correct!
  key="t3":       "Fix login bug"   [input: empty]        ← correct!

  Every input stays with its task. State is preserved correctly. ✓