Keys concept in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Why use keys in React lists?

Consider a React component rendering a list of items. Why is it important to assign a unique key prop to each list item?

React

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

A Keys prevent JavaScript errors by validating list item types.

B Keys help React identify which items changed, added, or removed, improving rendering performance.

C Keys are only needed when list items have event handlers.

D Keys are used to style list items uniquely with CSS.

💡 Hint

Think about how React updates the UI when data changes.

Keys let React track each element in a list so it can update only the changed items efficiently. Without keys, React may re-render all items unnecessarily.

❓ state_output

intermediate

What happens if keys are not unique?

Given this React code, what will be the output behavior when the list updates?

React

function FruitList() {
  const [fruits, setFruits] = React.useState(['apple', 'banana', 'cherry']);

  React.useEffect(() => {
    setTimeout(() => {
      setFruits(['banana', 'apple', 'cherry']);
    }, 1000);
  }, []);

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

A React will reorder the list correctly because keys are unique strings.

B React will throw a runtime error due to duplicate keys.

C React will not update the list properly because all keys are the same, causing rendering bugs.

D React will ignore the keys and update the list normally.

💡 Hint

What happens if React cannot distinguish list items by keys?

Using the same key for all items confuses React's diffing algorithm, leading to incorrect updates or UI bugs.

📝 Syntax

advanced

Identify the correct key usage in this React list

Which option correctly assigns keys in this React list rendering?

React

const users = [{id: 1, name: 'Anna'}, {id: 2, name: 'Ben'}, {id: 3, name: 'Cara'}];

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

A key={user.id}

B key={users.indexOf(user)}

C key={Math.random()}

D key={user.name}

💡 Hint

Keys should be stable and unique for each item.

Using user.id is stable and unique. Using index or random values can cause bugs during re-rendering.

🔧 Debug

advanced

Find the cause of the warning about keys

Why does React show this warning: "Each child in a list should have a unique 'key' prop."?

React

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => <li>{todo.text}</li>)}
    </ul>
  );
}

A Because the <code>ul</code> element is missing an <code>id</code> attribute.

B Because the <code>todos</code> array is empty.

C Because the <code>todo.text</code> is not unique.

D Because the <code>li</code> elements lack the <code>key</code> prop.

💡 Hint

Check the list items inside the map function.

React requires each list child to have a unique key prop to track elements properly.

🧠 Conceptual

expert

Why is using array index as key discouraged in dynamic lists?

In React, why is it generally discouraged to use the array index as the key prop when rendering dynamic lists?

A Because using index as key can cause incorrect component state and inefficient re-renders when list items change order or are added/removed.

B Because array indexes are not unique and cause syntax errors.

C Because React requires keys to be strings, and indexes are numbers.

D Because using index as key disables React's virtual DOM.

💡 Hint

Think about what happens when list items move or change.

Using indexes as keys can confuse React when items reorder or change, leading to bugs like wrong state or unnecessary re-renders.

Practice

1. Why does React require keys when rendering lists with map()?

easy

A. To uniquely identify each list item for efficient updates

B. To style each list item differently

C. To sort the list items automatically

D. To prevent the list from rendering

Solution

1. Step 1: Understand React's list rendering

   React uses keys to track each item in a list so it can update only changed items instead of re-rendering the whole list.

2. Step 2: Identify the purpose of keys

   Keys must be unique and stable to help React identify which items changed, were added, or removed.

3. Final Answer:

   To uniquely identify each list item for efficient updates -> Option A

4. Quick Check:

   Keys = Unique IDs for list items [OK]

Hint: Keys uniquely identify list items for React updates [OK]

Common Mistakes:

• Thinking keys are for styling
• Believing keys sort the list
• Assuming keys prevent rendering

2. Which of the following is the correct way to assign keys in a React list?

easy

A. {items.map(item => <li key={index}>{item.name}</li>)}

B. {items.map(item => <li key={item.id}>{item.name}</li>)}

C. {items.map(item => <li key={Math.random()}>{item.name}</li>)}

D. {items.map(item => <li>{item.name}</li>)}

Solution

1. Step 1: Check key uniqueness and stability

   Using item.id ensures each key is unique and stable across renders.

2. Step 2: Evaluate other options

   Using index or Math.random() can cause unstable keys leading to rendering bugs. Omitting keys causes React warnings.

3. Final Answer:

   {items.map(item => <li key={item.id}>{item.name}</li>)} -> Option B

4. Quick Check:

   Use stable unique IDs as keys [OK]

Hint: Use unique stable IDs, not index or random, for keys [OK]

Common Mistakes:

• Using array index as key when list changes
• Using random values for keys
• Not providing any key

3. What will be the output in the console when this React code runs?

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

const list = items.map(item => <li key={item.id}>{item.name}</li>);
console.log(list.length);

medium

A. 3

B. undefined

C. 0

D. Error

Solution

1. Step 1: Understand the map function output

   The map creates an array of 3 <li> React elements, one for each item.

2. Step 2: Check the length of the array

   The array list has 3 elements, so list.length is 3.

3. Final Answer:

   3 -> Option A

4. Quick Check:

   Array length equals number of items mapped [OK]

Hint: map returns array same length as input [OK]

Common Mistakes:

• Confusing React elements with strings
• Expecting undefined from map
• Thinking keys affect array length

4. Identify the problem in this React code snippet:

const items = ['A', 'B', 'C'];

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

medium

A. map function syntax is incorrect

B. Missing unique key prop causes error

C. Using index as key can cause bugs if list changes

D. List items should be wrapped in a div

Solution

1. Step 1: Analyze key usage

   Using array index as key works only if list never changes order or items.

2. Step 2: Understand potential bugs

   If items are added, removed, or reordered, React may reuse wrong elements causing UI bugs.

3. Final Answer:

   Using index as key can cause bugs if list changes -> Option C

4. Quick Check:

   Index keys cause bugs on list changes [OK]

Hint: Avoid index keys if list can reorder or change [OK]

Common Mistakes:

• Thinking index keys are always safe
• Believing missing keys cause syntax errors
• Assuming map syntax is wrong

5. You have a list of users with possible duplicate names:

const users = [
  { id: 1, name: 'Sam' },
  { id: 2, name: 'Alex' },
  { id: 3, name: 'Sam' }
];

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

What problem might occur and how to fix it?

hard

A. Wrap list in a fragment to fix duplicate keys

B. No problem; keys can be duplicate if names match

C. Keys must be numbers; convert names to numbers

D. Duplicate keys from same names cause rendering bugs; use user.id as key

Solution

1. Step 1: Identify duplicate keys

   Using user.name as key causes duplicates because 'Sam' appears twice.

2. Step 2: Fix by using unique stable keys

   Use user.id which is unique for each user to avoid React key conflicts.

3. Final Answer:

   Duplicate keys from same names cause rendering bugs; use user.id as key -> Option D

4. Quick Check:

   Keys must be unique; use unique IDs [OK]

Hint: Keys must be unique; avoid duplicates like same names [OK]

Common Mistakes:

• Assuming keys can be duplicated
• Thinking keys must be numeric only
• Trying to fix keys by wrapping in fragments