React Fundamentals: Lists & Keys

1. Explanation

What are Lists in React?

In real-world React applications, we often need to display multiple items of similar data such as user lists, product lists, blog posts, or menu items.

React allows us to render lists dynamically using JavaScript array methods like map().

Instead of writing repetitive JSX manually, we loop through data and generate UI automatically. This makes the code cleaner, scalable, and easier to maintain.

Example Without Lists (Not Recommended)

<p>Apple</p>
<p>Banana</p>
<p>Mango</p>

This approach is not scalable and difficult to maintain when data grows.

Rendering Lists in React (Recommended Approach)

const fruits = ["Apple", "Banana", "Mango"];

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

This approach is dynamic, reusable, and follows React best practices.

What are Keys in React?

Keys are special attributes that help React identify which items in a list have changed, been added, or removed.

Keys play a critical role in improving application performance and ensuring correct UI updates.

Why Keys Are Important

React uses keys to track individual elements in a list. This helps React update only the necessary parts of the DOM instead of re-rendering the entire list.

Without keys, React may update elements incorrectly and cause performance issues.

Rules for Using Keys

Keys must be unique among sibling elements. Keys should be stable and not change over time. Avoid using array indexes as keys unless the list is static.

2. Examples

Example Without Keys (Incorrect)

const users = ["Amit", "Rahul", "Neha"];

<ul>
  {users.map((user) => (
    <li>{user}</li>
  ))}
</ul>

This may cause warnings and incorrect UI behavior.

Example With Keys (Correct)

const users = ["Amit", "Rahul", "Neha"];

<ul>
  {users.map((user) => (
    <li key={user}>{user}</li>
  ))}
</ul>

Example Using Object Data (Best Practice)

const users = [
  { id: 1, name: "Amit" },
  { id: 2, name: "Rahul" },
  { id: 3, name: "Neha" }
];

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

Using a unique ID from the database is the best practice for keys.

Using Index as Key (Use with Caution)

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

Using index as a key should only be done when the list is static and will never change.

3. Interview Questions and Answers

1. What are lists in React?

Lists in React are used to render multiple similar elements dynamically using JavaScript array methods like map().

2. What are keys in React?

Keys are unique identifiers that help React track list items and improve rendering performance.

3. Why are keys important in React?

Keys help React identify which items have changed, added, or removed, enabling efficient UI updates.

4. Can we use index as key in React?

Yes, but only when the list is static and does not change. Otherwise, it can cause rendering issues.

5. What happens if keys are not provided?

React shows a warning and may re-render list items incorrectly, leading to performance problems.

6. Should keys be globally unique?

No, keys only need to be unique among sibling elements.

7. Can keys be accessed inside components?

No, keys are used internally by React and cannot be accessed as props inside components.

8. What is the best source for keys?

A unique identifier such as a database ID is the best source for keys.