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.