Reusable components in React - Step-by-Step Execution

Concept Flow - Reusable components

Create Component Function

↓

Use Props to Customize

↓

Render JSX Output

↓

Use Component Multiple Times

↓

Each Instance Shows Customized Output

This flow shows how a reusable React component is created, customized with props, rendered, and used multiple times with different data.

Execution Sample

React

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

ReactDOM.render(
  <>
    <Greeting name="Alice" />
    <Greeting name="Bob" />
  </>,
  document.getElementById('root')
);

This code defines a reusable Greeting component that shows a hello message with a name, then uses it twice with different names.

Execution Table

Step	Action	Props Received	Rendered Output	Notes
1	Call Greeting with name='Alice'	{ name: 'Alice' }	<h1>Hello, Alice!</h1>	First instance renders with Alice
2	Call Greeting with name='Bob'	{ name: 'Bob' }	<h1>Hello, Bob!</h1>	Second instance renders with Bob
3	No more calls	N/A	N/A	Rendering stops after all instances

💡 All component instances rendered with their respective props, no more calls to render.

Variable Tracker

Variable	Start	After 1	After 2	Final
props.name	undefined	Alice	Bob	Bob

Key Moments - 2 Insights

Why does each Greeting show a different name even though the component code is the same?

Because each call to Greeting passes different props.name values, as shown in execution_table steps 1 and 2, customizing the output.

What happens if we call Greeting without a name prop?

The props.name would be undefined, so the output would show 'Hello, !' or could be handled with default props, but this example does not show that.

Visual Quiz - 3 Questions

Look at the execution table, what is the rendered output at step 2?

A <h1>Hello, Alice!</h1>

B <h1>Hello, Bob!</h1>

C <h1>Hello, !</h1>

D <h1>Hello, React!</h1>

💡 Hint

Check the 'Rendered Output' column at step 2 in the execution_table.

At which step does the component receive props.name equal to 'Alice'?

A Step 3

B Step 2

C Step 1

D Never

💡 Hint

Look at the 'Props Received' column in the execution_table.

If we add a third call <Greeting name="Charlie" />, what will happen in the variable_tracker after that?

A props.name will have values: undefined, Alice, Bob, Charlie

B props.name will stay the same as before

C props.name will only show Charlie

D props.name will be undefined

💡 Hint

Variable tracker shows props.name values after each call, so adding a call adds a new value.

Concept Snapshot

Reusable components in React:
- Define a function that returns JSX
- Use props to customize output
- Call component multiple times with different props
- Each instance renders independently
- Helps avoid repeating code

Full Transcript

This visual execution shows how reusable components work in React. We start by defining a component function called Greeting that takes props and returns a heading with a hello message including props.name. Then we use this component twice with different names: Alice and Bob. Each time React calls the Greeting function with the given props and renders the customized output. The execution table tracks each call, the props received, and the rendered output. The variable tracker shows how props.name changes with each call. Key moments clarify why the same component code shows different outputs and what happens if props are missing. The quiz tests understanding of props and rendering steps. This helps beginners see how reusable components save effort and keep code clean.