Rendering lists in React - Step-by-Step Execution

Concept Flow - Rendering lists in React

Start Component Render

↓

JSX Evaluates Array.map()

↓

For Each Item: Create JSX Element

↓

Add Unique Key to Each Element

↓

Return Array of Elements

↓

React Renders List in DOM

↓

User Sees List Items Displayed

React renders lists by running map() on an array, creating JSX elements with unique keys, then displaying them in the DOM.

Execution Sample

React

const fruits = ['Apple', 'Banana', 'Cherry'];

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

This code renders a list of fruit names as <li> items inside a <ul>.

Execution Table

Step	Action	Input Array	map() Output	Key Used	Rendered JSX Element
1	Start render	['Apple', 'Banana', 'Cherry']	Not started	N/A	N/A
2	map() called	['Apple', 'Banana', 'Cherry']	Processing first item	index=0	<li key={0}>Apple</li>
3	map() continues	['Apple', 'Banana', 'Cherry']	Processing second item	index=1	<li key={1}>Banana</li>
4	map() continues	['Apple', 'Banana', 'Cherry']	Processing third item	index=2	<li key={2}>Cherry</li>
5	map() returns array	['Apple', 'Banana', 'Cherry']	[<li key={0}>Apple</li>, <li key={1}>Banana</li>, <li key={2}>Cherry</li>]	keys 0,1,2	Array of <li> elements
6	React renders list	N/A	N/A	N/A	<ul> with 3 <li> children displayed
7	Render complete	N/A	N/A	N/A	User sees bullet list: Apple, Banana, Cherry

💡 All items processed, map() returned full array, React rendered list in DOM

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
fruits	['Apple', 'Banana', 'Cherry']	Same	Same	Same	Same
index	N/A	0	1	2	N/A
map() output	[]	[<li key={0}>Apple</li>]	[<li key={0}>Apple</li>, <li key={1}>Banana</li>]	[<li key={0}>Apple</li>, <li key={1}>Banana</li>, <li key={2}>Cherry</li>]	Final array of JSX elements

Key Moments - 3 Insights

Why do we need to add a unique key to each list item?

React uses keys to track each element uniquely for efficient updates. Without keys, React may re-render all items unnecessarily. See execution_table rows 2-5 where keys are assigned.

Can we use the array index as the key for list items?

Using index as key works for static lists but can cause problems if list items reorder or change. It's better to use a unique id if available. Here, index is used for simplicity (execution_table rows 2-4).

What happens if we forget to return the JSX element inside map()?

If map() callback does not return JSX, the output array will have undefined items, so React renders nothing or errors. In this example, each map callback returns <li> (execution_table rows 2-4).

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the key used for the second list item?

A 0

B 2

C 1

D undefined

💡 Hint

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

At which step does map() finish creating all list items?

A Step 4

B Step 5

C Step 6

D Step 7

💡 Hint

Look for the step where map() returns the full array in execution_table

If we remove the key attribute from <li>, what problem might occur?

A React may inefficiently update the list causing bugs

B React will throw a syntax error

C React will render the list twice

D Nothing, keys are optional

💡 Hint

Refer to key_moments about why keys are important

Concept Snapshot

Rendering lists in React:
- Use array.map() inside JSX to create elements
- Each element needs a unique key prop
- Keys help React track items for efficient updates
- Return JSX from map callback
- Render the array inside a container like <ul>

Full Transcript

Rendering lists in React means taking an array of data and turning it into a set of JSX elements that React can show on the page. We use the map() function on the array to create a new array of JSX elements. Each element must have a unique key property so React can keep track of them efficiently. In the example, a list of fruits is mapped to <li> elements with keys based on their index. React then renders these inside a <ul>. This process helps React update only the changed items when the list changes, improving performance and avoiding bugs.