Conditional component rendering in React - Step-by-Step Execution

Concept Flow - Conditional component rendering

Start Render

↓

Evaluate Condition

↓

Render Component A

↓

Display Output

React checks a condition during rendering and shows one component or another based on that condition.

Execution Sample

React

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

This component shows a welcome message if the user is logged in, otherwise it asks to sign in.

Execution Table

Step	isLoggedIn Value	Condition (isLoggedIn ?)	Component Rendered	Output Text
1	true	true	<h1>Welcome back!</h1>	Welcome back!
2	false	false	<h1>Please sign in.</h1>	Please sign in.
3	null	false	<h1>Please sign in.</h1>	Please sign in.
4	undefined	false	<h1>Please sign in.</h1>	Please sign in.

💡 Rendering ends after choosing the component based on the condition.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
isLoggedIn	undefined	true	false	null	undefined

Key Moments - 2 Insights

Why does the component render the 'Please sign in.' message when isLoggedIn is null or undefined?

Because in JavaScript, null and undefined are treated as false in conditions, so the else part of the conditional renders. See execution_table rows 3 and 4.

What happens if we forget to return a component in one branch?

React will render nothing for that branch, which might cause blank space or missing UI. The execution_table shows both branches always return a component.

Visual Quiz - 3 Questions

Look at the execution_table, what component is rendered when isLoggedIn is false?

A <h1>Please sign in.</h1>

B <h1>Welcome back!</h1>

C No component

D An error

💡 Hint

Check execution_table row 2 under 'Component Rendered'

At which step does the condition evaluate to true?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the 'Condition (isLoggedIn ?)' column in execution_table

If isLoggedIn was changed to always be true, how would the output change?

A Always show 'Please sign in.'

B Always show 'Welcome back!'

C Show nothing

D Alternate messages each render

💡 Hint

Refer to variable_tracker and execution_table rows where isLoggedIn is true

Concept Snapshot

Conditional component rendering in React:
Use a condition inside the return to choose which component to show.
Syntax example: return condition ? <A /> : <B />;
If condition is true, render first component; else render second.
Useful for showing different UI based on state or props.

Full Transcript

This visual guide shows how React decides which component to render based on a condition. The example component Greeting takes a prop isLoggedIn. If true, it renders a welcome message. If false or falsy, it asks the user to sign in. The execution table traces different values of isLoggedIn and the resulting output. The variable tracker shows how isLoggedIn changes across steps. Key moments clarify why falsy values render the else branch and the importance of returning components in both branches. The quiz tests understanding of which component renders at each step and how changing isLoggedIn affects output.