📘 React Mastery Series — Day 21

Lists & Keys in React — Dynamic Rendering Mastery

In real applications, we rarely hardcode UI.

We display:

• User lists

• Products

• Comments

• Notifications

• Orders

All of this is done using Lists in React.

But, there’s one important thing attached to lists…

👉 Keys

Today we understand both properly.

---

🧠 Rendering Lists in React

In React, we render lists using JavaScript’s .map() method.

---

🛠 Example — Basic List Rendering

function UserList() {
  const users = ["Shailaja", "Aman", "Priya", "Rahul"];

  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

✔ .map() loops over array

✔ Returns JSX

✔ Renders dynamic content

---

🤔 What Are Keys in React?

Keys are unique identifiers used by React to track which list items change, are added, or are removed.

React uses keys for efficient re-rendering.

Without keys, React shows warning.

---

🧠 Why Keys Are Important?

Imagine:

• You remove item 2 from list

• React must know which item changed

Keys help React:

✔ Identify elements

✔ Optimize re-render

✔ Avoid UI bugs

---

⚠ Common Mistake

Using index as key.

<li key={index}>{user.name}</li>

This works…

But not recommended when:

• List items can be reordered

• Items can be deleted

• Data changes dynamically

---

✅ Best Practice — Use Unique ID

function UserList() {
  const users = [
    { id: 1, name: "Shailaja" },
    { id: 2, name: "Aman" },
    { id: 3, name: "Priya" }
  ];

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

✔ Stable

✔ Predictable

✔ Professional practice

---

🔥 Real-World Example — Rendering Products

function ProductList({ products }) {
  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>₹{product.price}</p>
        </div>
      ))}
    </div>
  );
}

This pattern is used in:

• E-commerce apps

• Dashboards

• Admin panels

• Social media feeds

---

🧠 Interview One-Liner

Keys in React are unique identifiers used to help React efficiently update and re-render list items.

---

🎯 Rules to Remember

✔ Always provide a key

✔ Key must be unique

✔ Prefer stable IDs

✔ Avoid index when possible

---

🔗 How It Connects with Previous Days

✔ Conditional Rendering (Day 20)

✔ Lifting State (Day 19)

✔ Forms (Day 18)

✔ Real API data rendering

Now you can confidently render dynamic UI.

---

✅ Key Takeaways

✔ Use .map() to render lists

✔ Keys are mandatory

✔ Use unique IDs

✔ Avoid index when list is dynamic

---

🔜 Coming Next

Day 22 — Handling Events in React (Clean & Scalable Event Logic)

Now we refine interaction patterns 🔥