Component composition in React - Step-by-Step Execution

Concept Flow - Component composition

Parent Component

↓

Render Child Components

↓

Pass Props or Children

↓

Child Components Render

↓

Combine Outputs in Parent

The parent component renders child components, passing data or children, then combines their outputs to build the UI.

Execution Sample

React

function Button({label}) {
  return <button>{label}</button>;
}

function App() {
  return <Button label="Click me" />;
}

A parent component App renders a child Button component, passing a label prop to display.

Execution Table

Step	Component	Props/Children	Render Output	Parent Update
1	App	none	<Button label="Click me" />	App prepares to render Button
2	Button	label="Click me"	<button>Click me</button>	Button output ready
3	App	Button output	<button>Click me</button>	App renders final output
4	End	N/A	UI shows a button with text 'Click me'	Rendering complete

💡 All components rendered and combined, UI is ready.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
App JSX	undefined	<Button label="Click me" />	<Button label="Click me" />	<button>Click me</button>	<button>Click me</button>
Button props	undefined	undefined	{label: "Click me"}	{label: "Click me"}	{label: "Click me"}
Button output	undefined	undefined	<button>Click me</button>	<button>Click me</button>	<button>Click me</button>

Key Moments - 2 Insights

Why does the Button component receive props inside App?

Because App passes the label prop when rendering Button, as shown in execution_table step 1 and 2.

How does the parent component combine child outputs?

The parent uses the child's render output as part of its own JSX, seen in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the Button component's render output at step 2?

A <Button label="Click me" />

B <button>Click me</button>

C undefined

D <button>Submit</button>

💡 Hint

Check the 'Render Output' column for Button at step 2.

At which step does the App component have the final combined output?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for when App's 'Render Output' shows the button element.

If App passed label="Submit" instead, how would Button's output change at step 2?

A <button>Submit</button>

B <button>Click me</button>

C <button></button>

D <Button label="Submit" />

💡 Hint

Button output depends on the label prop passed by App, see variable_tracker for Button props.

Concept Snapshot

Component composition in React means building UI by nesting components.
Parent components render children and pass data via props.
Children render their own UI using props or children.
Parent combines child outputs to form the final UI.
This keeps code modular and reusable.

Full Transcript

Component composition in React is when a parent component renders child components inside it. The parent can pass data to children using props. Each child uses these props to render its own part of the UI. Then the parent combines all child outputs to build the full interface. For example, a parent App renders a Button component and passes a label prop. Button uses this label to show text inside a button element. The rendering happens step-by-step: App prepares Button with props, Button renders the button element, then App includes that output in its own render. This way, components stay small and reusable, making UI easier to build and maintain.