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.

Practice

1. In Next.js, what is the main advantage of using composition over inheritance when building components?

easy

A. It allows combining small components for better reuse and clarity.

B. It requires less code to extend existing components.

C. It automatically manages component lifecycle methods.

D. It enforces strict type checking at compile time.

Solution

1. Step 1: Understand composition in Next.js

   Composition means building components by combining smaller, reusable parts to create complex UI.

2. Step 2: Compare with inheritance

   Inheritance extends existing components but can lead to complex and less clear code structures.

3. Final Answer:

   It allows combining small components for better reuse and clarity. -> Option A

4. Quick Check:

   Composition = combining parts for clarity [OK]

Hint: Composition combines parts; inheritance extends one component [OK]

Common Mistakes:

• Thinking inheritance is simpler for UI reuse
• Confusing lifecycle management with composition
• Assuming inheritance is preferred in Next.js

2. Which of the following is the correct way to use composition in a Next.js functional component?

easy

A. function Parent() { return <Child>; }

B. function Parent() { return <Child></Child>; }

C. function Parent() { return Child(); }

D. class Parent extends Child {}

Solution

1. Step 1: Identify JSX syntax for composition

   Composition uses JSX tags to include child components inside parent components.

2. Step 2: Check options for correct JSX usage

   function Parent() { return <Child></Child>; } correctly uses <Child></Child> tags, which is valid JSX. function Parent() { return <Child>; } uses opening tag but missing closing tag. class Parent extends Child {} uses inheritance syntax, not composition. function Parent() { return Child(); } calls Child as a function, which is not standard JSX.

3. Final Answer:

   <Child></Child> JSX tags for composition -> Option B

4. Quick Check:

   JSX tags = composition [OK]

Hint: Use JSX tags to compose components, not class inheritance [OK]

Common Mistakes:

• Using class extends syntax for composition
• Calling components as plain functions without JSX
• Missing closing tag for JSX element

3. Given the code below, what will be rendered on the screen?

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

function Toolbar() {
  return <div><Button label="Save" /></div>;
}

medium

A. Save

B. Save

C. Toolbar

D. Nothing renders due to syntax error

Solution

1. Step 1: Analyze Button component output

   The Button component returns a button element with the label text inside it.

2. Step 2: Analyze Toolbar component output

   Toolbar renders a div containing the Button component with label "Save", so the button with text "Save" appears inside the div.

3. Final Answer:

   <button>Save</button> -> Option A

4. Quick Check:

   Button label = Save [OK]

Hint: Look inside child component's return for rendered output [OK]

Common Mistakes:

• Confusing parent div content with button content
• Assuming Toolbar text appears inside button
• Thinking syntax error exists due to JSX

4. Identify the error in this Next.js component using inheritance:

class BaseButton extends React.Component {
  render() {
    return <button>Base</button>;
  }
}

function SubmitButton() {
  return <BaseButton label="Submit" />;
}

medium

A. SubmitButton should extend BaseButton instead of being a function.

B. BaseButton cannot be used inside a function component.

C. React.Component cannot be extended in Next.js.

D. BaseButton does not use the label prop in render method.

Solution

1. Step 1: Check BaseButton usage of props

   BaseButton receives a label prop but does not use it in the render method, so label is ignored.

2. Step 2: Check SubmitButton usage

   SubmitButton returns BaseButton with label prop, but since BaseButton ignores label, the button always shows "Base".

3. Final Answer:

   BaseButton does not use the label prop in render method. -> Option D

4. Quick Check:

   Unused prop = bug [OK]

Hint: Check if props passed are actually used in render [OK]

Common Mistakes:

• Thinking functional components can't use class components
• Assuming inheritance is disallowed in Next.js
• Confusing extending with composing

5. You want to create a reusable card component in Next.js that can display different content inside. Which approach best uses composition to achieve this?

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function Profile() {
  return (
    <Card>
      <h2>User Name</h2>
      <p>User details here</p>
    </Card>
  );
}

hard

A. Pass content as a string prop to Card and render inside.

B. Extend Card component with Profile using class inheritance.

C. Use children prop to pass nested components inside Card.

D. Create separate CardProfile component that duplicates Card code.

Solution

1. Step 1: Understand composition with children prop

   The children prop allows passing any nested JSX inside Card, making it reusable for different content.

2. Step 2: Compare other options

   Extending with inheritance is less flexible and not recommended. Passing content as string limits flexibility. Duplicating code reduces reuse.

3. Final Answer:

   Use children prop to pass nested components inside Card. -> Option C

4. Quick Check:

   children prop = composition [OK]

Hint: Use children prop to nest content inside reusable components [OK]

Common Mistakes:

• Trying to extend components with class inheritance
• Passing content as plain strings instead of JSX
• Duplicating component code instead of composing