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.