Composition vs inheritance in NextJS - Visual Side-by-Side Comparison

Concept Flow - Composition vs inheritance

Start

↓

Choose approach

↓

Use Inheritance

↓

Extend base class

↓

Override or add

↓

Use in app

↓

End

Shows the decision flow between using inheritance or composition in Next.js components.

Execution Sample

NextJS

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

function IconButton(props) {
  return <Button label={props.label} />;
}

A simple example showing composition by wrapping a Button component inside IconButton.

Execution Table

Step	Component Rendered	Props Passed	Output Rendered	Notes
1	Button	{ label: 'Click me' }	<button>Click me</button>	Button renders with label from props
2	IconButton	{ label: 'Click me' }	<button>Click me</button>	IconButton composes Button, passing label
3	App uses IconButton	N/A	<button>Click me</button>	IconButton used in app, renders Button inside
4	End	N/A	N/A	Rendering complete

💡 Rendering ends after IconButton composes Button and output is displayed

Variable Tracker

Variable	Start	After IconButton Render	Final
props.label	undefined	'Click me'	'Click me'

Key Moments - 2 Insights

Why does IconButton pass props to Button instead of extending it?

Because in composition, components use other components by passing props, not by inheritance. See execution_table step 2 where IconButton renders Button with props.

Can we override Button behavior using composition like inheritance?

Composition allows adding or changing behavior by wrapping components and passing different props or children, unlike inheritance which overrides methods. This is shown in step 2 and 3.

Visual Quiz - 3 Questions

Look at the execution_table, what does IconButton render at step 2?

A <IconButton>Click me</IconButton>

B <button>Click me</button>

C <button>IconButton</button>

D Nothing

💡 Hint

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

At which step does the Button component receive the label prop?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at 'Props Passed' column for Button in execution_table

If IconButton did not pass the label prop to Button, what would Button render?

A <button></button>

B <IconButton></IconButton>

C <button>Click me</button>

D Error

💡 Hint

Refer to variable_tracker for props.label values and how Button uses it

Concept Snapshot

Composition vs Inheritance in Next.js:
- Inheritance: Extend a base component class (rare in React/Next.js)
- Composition: Build components by combining others via props/children
- Composition is preferred for flexibility and reuse
- Pass props to child components to customize
- Avoid deep inheritance chains in React apps

Full Transcript

This visual execution shows how composition and inheritance differ in Next.js. The flow diagram starts with choosing an approach, then either extending a base class (inheritance) or combining components (composition). The code example shows IconButton composing Button by passing props. The execution table traces rendering steps: Button renders with label prop, IconButton composes Button, and the app renders IconButton. Variable tracker shows props.label value passed down. Key moments clarify why composition passes props instead of extending, and how behavior is customized. The quiz tests understanding of rendering outputs and prop passing. The snapshot summarizes that composition is preferred in Next.js for flexible component reuse.