Default props in React - Step-by-Step Execution

Concept Flow - Default props

Component Called

↓

Check Props Passed?

Yes No↓

Use Passed Props

↓

Render Component

When a React component is called, it checks if props are passed. If not, it uses default props before rendering.

Execution Sample

React

function Greeting({ name = "Guest" }) {
  return <h1>Hello, {name}!</h1>;
}

<Greeting />
<Greeting name="Alice" />

This code shows a Greeting component using a default prop for name if none is provided.

Execution Table

Step	Component Call	Props Passed	Name Value Used	Rendered Output
1	<Greeting />	No	"Guest"	<h1>Hello, Guest!</h1>
2	<Greeting name="Alice" />	Yes (name="Alice")	"Alice"	<h1>Hello, Alice!</h1>

💡 All component calls processed; default props used when no props passed.

Variable Tracker

Variable	Start	After Call 1	After Call 2	Final
name	undefined	"Guest"	"Alice"	"Alice"

Key Moments - 2 Insights

Why does the component show "Guest" when no name prop is passed?

Because the default value "Guest" is used when the name prop is undefined, as shown in execution_table step 1.

What happens if a name prop is passed?

The passed name prop overrides the default, as seen in execution_table step 2 where "Alice" is used.

Visual Quiz - 3 Questions

Look at the execution table, what is the name value used at step 1?

A undefined

B "Alice"

C "Guest"

D null

💡 Hint

Check the 'Name Value Used' column in execution_table row 1.

At which step does the component use the passed prop instead of the default?

A Step 2

B Step 1

C Both steps

D Neither step

💡 Hint

Look at the 'Props Passed' column in execution_table.

If we remove the default value from the component, what happens when <Greeting /> is called?

A It renders "Hello, Guest!"

B It renders "Hello, undefined!"

C It throws an error

D It renders nothing

💡 Hint

Refer to variable_tracker and how 'name' is set when no default is provided.

Concept Snapshot

Default props in React let components use fallback values when no props are passed.
Use function parameter defaults like ({ name = "Guest" }) to set them.
If a prop is passed, it overrides the default.
This ensures components always have values to render.
No need for separate defaultProps with modern React.

Full Transcript

This visual shows how React components use default props. When the Greeting component is called without a name prop, it uses the default "Guest". When called with name="Alice", it uses "Alice". The execution table tracks each call, showing the name value used and the rendered output. The variable tracker follows the name variable's value changes. Key moments clarify why defaults are used and how passed props override them. The quiz tests understanding of these steps. Default props help components render correctly even if some props are missing.