Common list rendering mistakes in React - Step-by-Step Execution

Concept Flow - Common list rendering mistakes

Start: Render list component

↓

Map over array

↓

Return JSX for each item

↓

Check for unique key prop

↓

Render list

↓

React updates DOM efficiently

This flow shows how React renders a list by mapping over data and the importance of unique keys to help React update the UI correctly.

Execution Sample

React

const items = ['apple', 'banana', 'cherry'];
return (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);

This code renders a list of fruits with the key prop on list items.

Execution Table

Step	Action	JSX Output	Key Prop Present?	React Behavior
1	Start rendering list	<ul>...</ul>	N/A	Begin mapping over items
2	Map item 'apple'	<li>apple</li>	No	Warning: Missing key, React may re-use elements incorrectly
3	Map item 'banana'	<li>banana</li>	No	Warning: Missing key, React may re-use elements incorrectly
4	Map item 'cherry'	<li>cherry</li>	No	Warning: Missing key, React may re-use elements incorrectly
5	Finish rendering	<ul><li>apple</li><li>banana</li><li>cherry</li></ul>	No	React renders list but warns about keys
6	Fix: Add key={item}	<li key='apple'>apple</li> ...	Yes	React uses keys to track items efficiently
7	Render with keys	<ul><li key='apple'>apple</li><li key='banana'>banana</li><li key='cherry'>cherry</li></ul>	Yes	React updates DOM correctly without warnings
8	Mistake: Use index as key	<li key='0'>apple</li> ...	Yes	Works but can cause bugs if list changes order
9	Finish with index keys	<ul><li key='0'>apple</li><li key='1'>banana</li><li key='2'>cherry</li></ul>	Yes	React may mis-update items on reorder
10	Exit	N/A	N/A	Rendering complete

💡 Rendering stops after all list items are processed and React updates the DOM.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
items	['apple', 'banana', 'cherry']	Same	Same	Same	Same
key prop	undefined	undefined	undefined	undefined	defined or index depending on fix

Key Moments - 3 Insights

Why does React warn about missing keys in list items?

React uses keys to identify which items changed, added, or removed. Without keys (see execution_table rows 2-5), React cannot track items properly and may re-use DOM elements incorrectly.

Is using the array index as a key always safe?

Using index as key (see execution_table rows 8-9) works if the list never changes order or items. But if items reorder or change, React may update wrong elements, causing bugs.

What happens if keys are not unique?

If keys are duplicated, React cannot distinguish items properly, leading to unexpected UI updates or bugs. Keys must be unique among siblings.

Visual Quiz - 3 Questions

Look at the execution table at step 3. What is the key prop value for the 'banana' item?

A Index 1

B No key prop present

C 'banana'

D 'apple'

💡 Hint

Check the 'Key Prop Present?' column at step 3 in the execution_table.

At which step does React start using keys to track list items correctly?

A Step 6

B Step 5

C Step 8

D Step 2

💡 Hint

Look for the first step where 'Key Prop Present?' is 'Yes' and React behavior improves.

If you use index as key (step 8), what problem might occur when the list changes?

A React will throw an error

B React will ignore the list

C React may update wrong items causing UI bugs

D React will duplicate items

💡 Hint

Refer to the React behavior described at step 9 in the execution_table.

Concept Snapshot

React list rendering requires a unique key prop on each item.
Keys help React track items between renders.
Missing keys cause warnings and inefficient updates.
Using array index as key can cause bugs if list order changes.
Always use stable, unique keys like IDs or unique strings.

Full Transcript

This lesson shows how React renders lists by mapping over arrays and returning JSX for each item. React requires a unique key prop on each list item to track changes efficiently. Without keys, React warns and may re-use DOM elements incorrectly. Using array index as key works only if the list never changes order. Unique, stable keys prevent UI bugs and improve performance.

Practice

1. Why is it important to add a unique key prop when rendering lists in React?

easy

A. It automatically sorts the list alphabetically.

B. It makes the list items look prettier on the screen.

C. It prevents the list from rendering at all.

D. It helps React identify which items have changed, added, or removed.

Solution

1. Step 1: Understand the role of keys in React lists

   Keys help React track each item uniquely when the list changes.

2. Step 2: Identify the effect of keys on UI updates

   With keys, React can efficiently update only changed items, improving performance and correctness.

3. Final Answer:

   It helps React identify which items have changed, added, or removed. -> Option D

4. Quick Check:

   Keys improve UI updates = A [OK]

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

Common Mistakes:

• Thinking keys affect styling
• Believing keys prevent rendering
• Assuming keys sort the list

2. Which of the following is the correct way to add keys when rendering a list of items stored in items array?

easy

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

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

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

D. {items.map((item, i) => <li key={i + 1}>{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 as key (options A and D) can cause bugs if list changes; no key ({items.map(item => <li>{item.name}</li>)}) causes warnings.

3. Final Answer:

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

4. Quick Check:

   Use unique stable keys = B [OK]

Hint: Use unique IDs, not indexes, as keys [OK]

Common Mistakes:

• Using array index as key
• Omitting the key prop
• Using non-unique keys

3. What will be the output of this React code snippet?

const items = ['apple', 'banana', 'cherry'];

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

Assuming the list changes by adding 'date' at the start, what problem might occur?

medium

A. React may reuse wrong list items causing UI bugs due to index keys.

B. React will throw a syntax error because keys cannot be numbers.

C. The list will not render at all.

D. React will correctly update the list with no issues.

Solution

1. Step 1: Understand index as key behavior

   Using index as key means keys depend on item position, not identity.

2. Step 2: Analyze effect of adding item at start

   Adding 'date' at start shifts indexes, causing React to mismatch items and update wrong elements.

3. Final Answer:

   React may reuse wrong list items causing UI bugs due to index keys. -> Option A

4. Quick Check:

   Index keys cause UI bugs on list changes = D [OK]

Hint: Index keys break UI if list order changes [OK]

Common Mistakes:

• Assuming index keys are always safe
• Thinking React throws error for numeric keys
• Believing list won't render without unique keys

4. Identify the error in this React list rendering code:

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

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

medium

A. Using user.name as key may cause duplicate keys if names repeat.

B. Missing key prop on list items.

C. Using curly braces inside JSX is invalid here.

D. The map function should return a fragment instead of <li>.

Solution

1. Step 1: Check key uniqueness

   Keys must be unique and stable. Using user.name risks duplicates if names repeat.

2. Step 2: Confirm other code parts

   Key prop is present; JSX syntax is correct;
3. is appropriate for list items.

4. Final Answer:

   Using user.name as key may cause duplicate keys if names repeat. -> Option A

5. Quick Check:

   Keys must be unique = C [OK]

Hint: Keys must be unique, avoid using non-unique fields [OK]

Common Mistakes:

• Using non-unique keys like names
• Omitting key prop
• Misunderstanding JSX syntax

5. You have a list of tasks where some tasks have duplicate IDs due to a backend bug. How should you render this list in React to avoid key conflicts?

const tasks = [
  {id: 1, title: 'Task A'},
  {id: 2, title: 'Task B'},
  {id: 1, title: 'Task C'}
];

function TaskList() {
  return (
    <ul>
      {tasks.map((task, index) => (
        <li key={/* What to put here? */}>{task.title}</li>
      ))}
    </ul>
  );
}

hard

A. Use key={task.id} even if duplicates exist.

B. Use key={index} to guarantee uniqueness despite duplicates.

C. Combine id and index like key={`${task.id}-${index}`} for unique keys.

D. Omit the key prop to avoid errors.

Solution

1. Step 1: Understand key uniqueness requirement

   Keys must be unique and stable. Duplicate IDs break uniqueness.

2. Step 2: Combine id and index for uniqueness

   Combining id and index creates unique keys like '1-0', '1-2', avoiding conflicts.

3. Final Answer:

   Combine id and index like key={`${task.id}-${index}`} for unique keys. -> Option C

4. Quick Check:

   Unique keys from combined values = A [OK]

Hint: Combine id and index for unique keys if duplicates exist [OK]

Common Mistakes:

• Using duplicate IDs as keys
• Omitting keys
• Using only index keys causing UI bugs