Functional components in React - Step-by-Step Execution

Concept Flow - Functional components

Start: Define Functional Component

↓

Call Functional Component

↓

Execute Function Body

↓

Return JSX Element

↓

React Renders JSX to DOM

↓

Component Displayed on Screen

This flow shows how React calls a functional component, runs its code, returns JSX, and renders it on the screen.

Execution Sample

React

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

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

This code defines a simple functional component that returns a greeting message and renders it.

Execution Table

Step	Action	Evaluation	Result
1	Call Greeting()	Function starts	Enter function body
2	Return JSX <h1>Hello, friend!</h1>	JSX created	JSX element ready
3	React renders JSX	Convert JSX to DOM nodes	DOM element <h1> with text 'Hello, friend!'
4	Display on screen	Browser shows element	User sees 'Hello, friend!' on page
5	No more code	Component finished	Render complete

💡 Component returns JSX and React finishes rendering it to the screen.

Variable Tracker

Variable	Start	After Call	After Return	Final
Greeting	Function definition	Function executing	JSX returned	Rendered on screen

Key Moments - 2 Insights

Why does the functional component return JSX instead of HTML?

JSX is a special syntax React uses to describe UI elements. React converts JSX to real HTML in the browser. See execution_table step 2 and 3.

What happens if the functional component does not return anything?

React will render nothing for that component. The execution_table shows the return step is essential to produce visible output.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result after step 3?

A JSX element ready

B DOM element <h1> with text 'Hello, friend!'

C Function starts

D User sees 'Hello, friend!' on page

💡 Hint

Check the 'Result' column in row for step 3.

At which step does React convert JSX to actual DOM nodes?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Action' and 'Evaluation' columns for step 3.

If the component returned null instead of JSX, what would happen?

A React renders an empty space

B React throws an error

C React renders the previous content

D React renders the JSX anyway

💡 Hint

Refer to key_moments about what happens if nothing is returned.

Concept Snapshot

Functional components are simple JavaScript functions.
They return JSX describing UI elements.
React calls them to get JSX and renders it.
No class syntax or lifecycle methods needed.
Use them to build UI pieces easily.

Full Transcript

Functional components in React are JavaScript functions that return JSX, a syntax that looks like HTML but is used by React to describe UI elements. When React calls a functional component, it runs the function body and expects JSX to be returned. React then converts this JSX into real DOM elements and displays them on the screen. This process is simple and direct, making functional components easy to write and understand. If a functional component does not return JSX or returns null, React will render nothing for that component. This visual execution trace shows each step from calling the function to rendering the output, helping beginners see how React handles functional components.