Rendering elements in React - Step-by-Step Execution

Concept Flow - Rendering elements

Start React Component

↓

Evaluate JSX

↓

Create React Element Objects

↓

ReactDOM.render

↓

Browser DOM Update

↓

User Sees UI

React components run, JSX is turned into React elements, then React updates the browser DOM to show the UI.

Execution Sample

React

function Hello() {
  return <h1>Hello, world!</h1>;
}

ReactDOM.render(<Hello />, document.getElementById('root'));

This code defines a simple React component that renders a heading, then renders it inside the page.

Execution Table

Step	Action	Evaluation	Result
1	Call Hello()	Return JSX <h1>Hello, world!</h1>	JSX element object created
2	ReactDOM.render called	Receives React element from Hello()	Schedules DOM update
3	React reconciles	Compares with previous DOM (none)	Creates <h1> element in DOM
4	Browser updates DOM	Adds <h1>Hello, world!</h1> inside #root	User sees heading on page
5	No further updates	No state or props changed	Rendering stops

💡 Rendering stops because no state or props changed to trigger update

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
React Element	null	{type: 'h1', props: {children: 'Hello, world!'}}	Same element passed to ReactDOM.render	Element reconciled and DOM created	Element rendered in DOM

Key Moments - 2 Insights

Why does React create an object instead of directly creating DOM elements?

React first creates a React element object (see Step 1 in execution_table) to efficiently compare changes before updating the real DOM, improving performance.

What triggers React to update the DOM after initial render?

React updates the DOM only when state or props change. In this example, no changes occur after Step 4, so rendering stops (see exit_note).

Visual Quiz - 3 Questions

Look at the execution table, what is created at Step 1?

A A React element object representing <h1>Hello, world!</h1>

B A real DOM <h1> element

C A string 'Hello, world!'

D A function Hello()

💡 Hint

Check the 'Evaluation' and 'Result' columns at Step 1 in the execution_table

At which step does the browser DOM actually get updated?

A Step 1

B Step 2

C Step 4

D Step 3

💡 Hint

Look for 'Browser updates DOM' action in the execution_table

If the component had state that changed, what would happen after Step 5?

A Nothing, rendering always stops at Step 5

B React would re-run the component and update the DOM if needed

C The browser would reload the page

D React would throw an error

💡 Hint

Refer to the exit_note and key_moments about what triggers React updates

Concept Snapshot

React rendering flow:
1. Component function runs and returns JSX.
2. JSX compiles to React element objects.
3. ReactDOM.render schedules DOM updates.
4. React compares elements and updates browser DOM.
5. User sees UI changes.
Updates happen only on state/props changes.

Full Transcript

Rendering elements in React means running a component function that returns JSX. React turns this JSX into React element objects, which are lightweight descriptions of what the UI should look like. ReactDOM.render takes these elements and updates the browser's DOM to match. This process happens step-by-step: first creating the element object, then scheduling the DOM update, then React compares with the current DOM and applies changes, and finally the browser shows the updated UI. React only updates the DOM again if the component's state or props change, otherwise rendering stops after the initial update.

Practice

1. What does rendering elements in React mean?

easy

A. Managing database connections

B. Writing CSS styles for components

C. Creating backend APIs

D. Showing content on the screen using React components

Solution

1. Step 1: Understand rendering in React

   Rendering means React creates and shows elements on the screen for users to see.

2. Step 2: Identify the correct description

   Only showing content on the screen matches rendering elements, not styling or backend tasks.

3. Final Answer:

   Showing content on the screen using React components -> Option D

4. Quick Check:

   Rendering = Showing content [OK]

Hint: Rendering means displaying content on screen [OK]

Common Mistakes:

• Confusing rendering with styling
• Thinking rendering means backend work
• Mixing rendering with database tasks

2. Which of the following is the correct way to render a simple React element?

easy

A. ReactDOM.render(<h1>Hello</h1>, document.getElementById('root'));

B. React.render(<h1>Hello</h1>, 'root');

C. ReactDOM.render('Hello', document.getElementById('root'));

D. ReactDOM.render(<h1>Hello</h1>);

Solution

1. Step 1: Recall ReactDOM.render syntax

   The correct syntax requires ReactDOM.render(element, container), where container is a DOM node.

2. Step 2: Check each option

   ReactDOM.render(<h1>Hello</h1>, document.getElementById('root')); uses ReactDOM.render with JSX element and document.getElementById('root'), which is correct.

3. Final Answer:

   ReactDOM.render(<h1>Hello</h1>, document.getElementById('root')); -> Option A

4. Quick Check:

   ReactDOM.render(element, container) = ReactDOM.render(<h1>Hello</h1>, document.getElementById('root')); [OK]

Hint: ReactDOM.render needs element and container node [OK]

Common Mistakes:

• Using React.render instead of ReactDOM.render
• Passing string instead of JSX element
• Omitting container DOM node

3. What will be displayed on the screen after running this React code?

const element = <h2>Welcome to React!</h2>;
ReactDOM.render(element, document.getElementById('root'));

medium

A. A plain text 'element' string

B. An <h2> heading with text 'Welcome to React!'

C. Nothing, because of a syntax error

D. An empty page with no content

Solution

1. Step 1: Understand JSX element creation

   The variable 'element' holds an <h2> JSX element with text 'Welcome to React!'.

2. Step 2: ReactDOM.render displays the element

   ReactDOM.render inserts this <h2> element inside the DOM node with id 'root', showing the heading on screen.

3. Final Answer:

   An <h2> heading with text 'Welcome to React!' -> Option B

4. Quick Check:

   JSX element renders as HTML heading [OK]

Hint: JSX inside render shows as HTML element [OK]

Common Mistakes:

• Thinking JSX is a string
• Expecting no output due to misunderstanding JSX
• Confusing variable name with output

4. Identify the error in this React rendering code:

const element = <h1>Hello World</h1>
ReactDOM.render(element, document.getElementById('root'));

medium

A. No error, code runs correctly

B. document.getElementById('root') is undefined

C. Missing semicolon after JSX element declaration

D. JSX element must be wrapped in parentheses

Solution

1. Step 1: Check JSX element syntax

   The JSX element is correctly assigned to 'element' variable; semicolon is optional in JavaScript.

2. Step 2: Verify ReactDOM.render usage

   ReactDOM.render is called with valid arguments; assuming 'root' exists in HTML, no error occurs.

3. Final Answer:

   No error, code runs correctly -> Option A

4. Quick Check:

   Valid JSX and render call = No error, code runs correctly [OK]

Hint: JSX semicolon optional; check DOM node exists [OK]

Common Mistakes:

• Thinking semicolon is mandatory after JSX
• Assuming JSX needs parentheses always
• Not verifying if 'root' element exists in HTML

5. You want to render a list of names as <li> items inside a <ul>. Which React code correctly renders this list?

const names = ['Anna', 'Bob', 'Cara'];

// Choose the correct rendering code

hard

A. ReactDOM.render(<ul><li>names</li></ul>, document.getElementById('root'));

B. const listItems = names.forEach(name => <li>{name}</li>);
ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root'));

C. const listItems = names.map(name => <li key={name}>{name}</li>);
ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root'));

D. const listItems = names.map(name => <li>{name}</li>);
ReactDOM.render(<ul>listItems</ul>, document.getElementById('root'));

Solution

1. Step 1: Understand list rendering with keys

   React requires keys on list items for efficient updates; map returns a new array of elements.

2. Step 2: Analyze each option

   const listItems = names.map(name => <li key={name}>{name}</li>); ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root')); uses map with key attribute and renders list correctly. const listItems = names.forEach(name => <li>{name}</li>); ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root')); uses forEach which returns undefined. ReactDOM.render(<ul><li>names</li></ul>, document.getElementById('root')); renders literal 'names' text. const listItems = names.map(name => <li>{name}</li>); ReactDOM.render(<ul>listItems</ul>, document.getElementById('root')); misses {} around listItems, rendering literal 'listItems' text.

3. Final Answer:

   const listItems = names.map(name => <li key={name}>{name}</li>); ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root')); -> Option C

4. Quick Check:

   Use map with keys for lists [OK]

Hint: Use map with keys to render lists in React [OK]

Common Mistakes:

• Using forEach instead of map for rendering
• Omitting key attribute on list items
• Rendering array as plain text