Props destructuring in React - Step-by-Step Execution

Concept Flow - Props destructuring

Component receives props object

↓

Destructure props into variables

↓

Use variables in JSX

↓

Render component output

The component gets a props object, breaks it into named variables, then uses those variables to build the output.

Execution Sample

React

function Greeting({ name, age }) {
  return <p>Hello {name}, you are {age} years old.</p>;
}

This component takes props and immediately extracts name and age to use in the greeting message.

Execution Table

Step	Action	Props Object	Destructured Variables	Rendered Output
1	Component called with props	{ name: 'Alice', age: 30 }	N/A	N/A
2	Destructure props	{ name: 'Alice', age: 30 }	name = 'Alice', age = 30	N/A
3	Use variables in JSX	{ name: 'Alice', age: 30 }	name = 'Alice', age = 30	<p>Hello Alice, you are 30 years old.</p>
4	Render output	N/A	N/A	<p>Hello Alice, you are 30 years old.</p>

💡 Rendering completes after using destructured variables in JSX.

Variable Tracker

Variable	Start	After Destructuring	Final
props	undefined	{ name: 'Alice', age: 30 }	N/A
name	undefined	'Alice'	'Alice'
age	undefined	30	30

Key Moments - 2 Insights

Why do we write { name, age } instead of props.name and props.age?

Destructuring extracts name and age from props so we can use them directly without repeating 'props.'. See execution_table step 2 where variables get assigned.

What happens if a prop is missing when destructuring?

The variable becomes undefined. For example, if age is missing, age will be undefined after destructuring (see variable_tracker). This can cause output to show 'undefined' unless handled.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what are the values of the destructured variables?

A name = 'Alice', age = 30

B name = undefined, age = undefined

C name = 'Bob', age = 25

D props = 'Alice', props = 30

💡 Hint

Check the 'Destructured Variables' column at step 2 in execution_table.

At which step does the component produce the final rendered output?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Rendered Output' column in execution_table to find when output is finalized.

If the props object was { name: 'Bob' } without age, what would be the value of age after destructuring?

A 30

B undefined

C null

D 0

💡 Hint

Refer to key_moments about missing props and variable_tracker for undefined values.

Concept Snapshot

Props destructuring in React:
function Component({ prop1, prop2 }) {
  // use prop1, prop2 directly
  return <div>{prop1} and {prop2}</div>;
}

It extracts props into variables for simpler code and cleaner JSX.

Full Transcript

In React, components receive a single object called props. Props destructuring means breaking that object into named variables right in the function parameters. This lets you use the variables directly without writing props.name or props.age every time. For example, function Greeting({ name, age }) extracts name and age from props. Then inside the component, you can write JSX using name and age directly. The execution steps show the component called with props, destructuring those props into variables, then using those variables to render the output. If a prop is missing, the destructured variable becomes undefined, so you should handle that case if needed. This pattern makes React components easier to read and write.