Keys concept in React - Step-by-Step Execution

Concept Flow - Keys concept

Render list component

↓

Map items to JSX elements

↓

Assign unique key to each element

↓

React uses keys to track elements

↓

On update: compare keys to detect changes

↓

Update only changed elements in DOM

React uses keys to identify list items uniquely so it can update only changed elements efficiently.

Execution Sample

React

const items = ['A', 'B', 'C'];
return (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);

This code renders a list of items with unique keys for each list element.

Execution Table

Step	Action	JSX Element	Key Assigned	React Behavior
1	Start rendering list	No elements yet	No keys	Prepare to create elements
2	Map item 'A'	<li>A</li>	'A'	Create element with key 'A'
3	Map item 'B'	<li>B</li>	'B'	Create element with key 'B'
4	Map item 'C'	<li>C</li>	'C'	Create element with key 'C'
5	Render complete	<ul> with 3 <li>	Keys 'A', 'B', 'C'	React tracks elements by keys
6	Update list to ['A', 'C', 'D']	Map new items	'A', 'C', 'D'	React compares keys, reuses 'A' and 'C', adds 'D', removes 'B'

💡 Rendering ends after all list items are processed and keys assigned

Variable Tracker

Variable	Start	After 1	After 2	After 3	After Update
items	['A', 'B', 'C']	['A', 'B', 'C']	['A', 'B', 'C']	['A', 'B', 'C']	['A', 'C', 'D']
keys	[]	['A']	['A', 'B']	['A', 'B', 'C']	['A', 'C', 'D']

Key Moments - 2 Insights

Why do keys need to be unique among siblings?

Keys must be unique so React can correctly identify which element changed, added, or removed, as shown in execution_table step 6 where React compares keys to update the list.

What happens if keys are missing or not unique?

React may reuse or reorder elements incorrectly, causing bugs or inefficient updates, because it cannot track elements properly without unique keys (see execution_table step 5).

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What key is assigned to the JSX element?

A 'A'

B 'C'

C 'B'

D No key assigned

💡 Hint

Check the 'Key Assigned' column at step 3 in execution_table

At which step does React detect that an item was removed from the list?

A Step 4

B Step 6

C Step 5

D React never detects removals

💡 Hint

Look at the 'React Behavior' column in execution_table step 6

If the keys were not unique, how would React's update behavior change?

A React might reuse wrong elements causing bugs

B React would update only changed elements correctly

C React would ignore the list entirely

D React would throw a syntax error

💡 Hint

Refer to key_moments about importance of unique keys

Concept Snapshot

Keys in React:
- Used in lists to uniquely identify elements
- Assigned via 'key' prop in JSX
- Help React track changes efficiently
- Keys must be unique among siblings
- Missing or duplicate keys cause update bugs

Full Transcript

In React, keys are special strings assigned to elements in a list to help React identify which items have changed, been added, or removed. When rendering a list, React maps each item to a JSX element and assigns a unique key. During updates, React compares these keys to update only the necessary elements in the DOM, improving performance and avoiding bugs. Keys must be unique among siblings; otherwise, React may confuse elements and cause unexpected behavior. This visual trace shows how keys are assigned step-by-step and how React uses them to track changes efficiently.