Composition vs inheritance in NextJS - Trade-offs & Expert Analysis

Overview - Composition vs inheritance

What is it?

Composition and inheritance are two ways to build components or objects by reusing code. Inheritance means creating a new component by extending an existing one, inheriting its features. Composition means building components by combining smaller, reusable pieces together. Both help organize code but work differently in how they share behavior.

Why it matters

Without composition or inheritance, developers would have to rewrite the same code many times, making apps harder to build and maintain. Inheritance can lead to rigid, tightly connected code that is hard to change. Composition offers more flexibility and clearer code structure, especially in frameworks like Next.js where components are key. Understanding these helps you write cleaner, easier-to-update apps.

Where it fits

Before this, you should know basic JavaScript and React component creation. After this, you can learn advanced component patterns, hooks, and state management in Next.js. This topic fits in the journey of mastering component design and code reuse.

Mental Model

Core Idea

Composition builds complex things by combining simple parts, while inheritance builds new things by extending existing ones.

Think of it like...

Think of inheritance like inheriting a family recipe and adding your own twist, while composition is like making a meal by putting together different ingredients from scratch.

Component
  ├─ Inheritance (extends) ──> BaseComponent
  └─ Composition (combines) ──> ComponentA + ComponentB + ComponentC

Build-Up - 6 Steps

1

Foundation

Understanding basic inheritance

Concept: Inheritance lets one component reuse code from another by extending it.

In Next.js (React), inheritance means creating a class component that extends another class component. The child component gets all the parent's features and can add or change some. For example, a Button component might extend a BaseButton to add styles.

Result

You get a new component that behaves like the parent but can customize or add new features.

Understanding inheritance shows how code reuse can happen by building on existing components, but it can create tight links between components.

2

Foundation

Understanding basic composition

Concept: Composition builds components by combining smaller components or functions.

In Next.js, composition means creating components that use other components inside them. For example, a Page component might include Header, Content, and Footer components. Each piece does one job, and together they form the whole.

Result

You get a component made of smaller parts, each easy to understand and reuse.

Composition encourages building with small, focused pieces that can be mixed and matched, making code flexible and easier to maintain.

3

Intermediate

Comparing inheritance and composition in React

🤔Before reading on: do you think inheritance or composition is more common in React? Commit to your answer.

Concept: React favors composition over inheritance for building UI components.

React's design encourages using composition by nesting components and passing props. Inheritance is possible but rarely used because it can make components harder to understand and reuse. Composition fits React's declarative style better.

Result

Most React and Next.js apps use composition to build UI, leading to clearer and more flexible code.

Knowing React prefers composition helps you follow best practices and avoid patterns that cause complexity.

4

Intermediate

Using props for flexible composition

🤔Before reading on: do you think passing props is part of composition or inheritance? Commit to your answer.

Concept: Props let components receive data or other components to compose flexible UIs.

In Next.js, you can pass components or data as props to build flexible layouts. For example, a Modal component can receive a Header and Body component as props to display different content. This makes components reusable in many places.

Result

Components become highly customizable and reusable by accepting other components or data as props.

Understanding props as a composition tool unlocks powerful ways to build adaptable components.

5

Advanced

Avoiding pitfalls of inheritance in UI design

🤔Before reading on: do you think deep inheritance trees are good or bad for UI components? Commit to your answer.

Concept: Deep inheritance can cause fragile and hard-to-change components in UI frameworks.

When components inherit from others in multiple layers, changes in a base component can unexpectedly break child components. This makes debugging and extending UI difficult. Composition avoids this by keeping components independent and combining them explicitly.

Result

Avoiding deep inheritance leads to more stable and maintainable UI code.

Knowing the risks of inheritance helps you choose composition to keep your UI codebase healthy.

6

Expert

Advanced composition patterns in Next.js

🤔Before reading on: do you think hooks are related to composition or inheritance? Commit to your answer.

Concept: Hooks and higher-order components are advanced composition techniques in React and Next.js.

Hooks let you reuse logic by composing functions inside components. Higher-order components (HOCs) wrap components to add features. Both are forms of composition that keep components simple and logic reusable without inheritance.

Result

You can build complex, reusable behaviors by composing hooks and HOCs, improving code clarity and flexibility.

Understanding hooks and HOCs as composition tools reveals how React and Next.js achieve powerful reuse without inheritance.

Under the Hood

Inheritance works by creating a prototype chain where the child component accesses properties and methods of the parent. Composition works by nesting components and passing data or components as props, letting React build a tree of elements. React's reconciliation algorithm efficiently updates the UI based on this tree structure.

Why designed this way?

React and Next.js were designed to favor composition because it aligns with the declarative UI model and functional programming principles. Inheritance was common in older UI frameworks but led to complex, tightly coupled code. Composition offers clearer separation and easier reuse.

Component Tree
  ├─ Composition: ParentComponent
  │    ├─ ChildComponentA
  │    └─ ChildComponentB
  └─ Inheritance: BaseComponent
       └─ ExtendedComponent

Myth Busters - 4 Common Misconceptions

Quick: Do you think inheritance is the main way to reuse code in React? Commit yes or no.

Common Belief: Inheritance is the primary method to reuse code in React components.

Reality: React primarily uses composition, not inheritance, for code reuse and UI building.

Why it matters: Believing inheritance is primary can lead to complex, hard-to-maintain code and missed opportunities to use React's strengths.

Quick: Do you think composition always means more complex code? Commit yes or no.

Common Belief: Composition makes code more complex because it involves many small components.

Reality: Composition simplifies code by breaking it into clear, reusable parts that are easier to understand and maintain.

Why it matters: Avoiding composition due to perceived complexity can cause large, tangled components that are harder to fix or extend.

Quick: Do you think inheritance and composition can be mixed freely without issues? Commit yes or no.

Common Belief: You can freely mix inheritance and composition without causing problems.

Reality: Mixing inheritance and composition carelessly can cause confusing component hierarchies and bugs.

Why it matters: Ignoring this can lead to fragile UI code that is difficult to debug and extend.

Quick: Do you think hooks are related to inheritance? Commit yes or no.

Common Belief: Hooks are a form of inheritance in React.

Reality: Hooks are a composition mechanism to reuse logic inside functional components, unrelated to inheritance.

Why it matters: Misunderstanding hooks can prevent you from using them effectively to write clean, reusable code.

Expert Zone

1

Composition allows selective reuse of behavior without inheriting unwanted features, unlike inheritance which brings all parent behavior.

2

In React, composition works seamlessly with hooks and context, enabling powerful patterns that inheritance cannot achieve.

3

Excessive inheritance can cause 'fragile base class' problems where changes in a base component break many children unexpectedly.

When NOT to use

Avoid inheritance in React and Next.js for UI components; prefer composition. Use inheritance only for non-UI logic where class hierarchies model domain concepts well. For UI, alternatives include hooks, HOCs, and render props.

Production Patterns

In production Next.js apps, composition is used to build layouts by nesting components, passing props, and using hooks for shared logic. Inheritance is rare and mostly seen in legacy code or utility classes. Advanced patterns include compound components and context-based composition.

Connections

Functional Programming

Composition in UI mirrors function composition in FP where small functions combine to build complex behavior.

Understanding function composition helps grasp how React components combine to form complex UIs without inheritance.

Object-Oriented Programming

Inheritance is a core OOP concept where classes extend others to reuse code.

Knowing OOP inheritance clarifies why React avoids it for UI and prefers composition for flexibility.

Modular Design in Architecture

Composition in software is like modular building design where rooms (modules) combine to form a house.

Seeing software components as building blocks helps appreciate composition's flexibility and maintainability.

Common Pitfalls

#1 Using deep inheritance chains for UI components.

Wrong approach:

class Button extends BaseButton {}
class IconButton extends Button {}
class FancyIconButton extends IconButton {}

Correct approach:

function Button(props) { return }
function IconButton(props) { return }

Root cause:

Misunderstanding that inheritance leads to tight coupling and fragile components instead of flexible composition.

#2 Passing data via inheritance instead of props.

Wrong approach:

class Parent extends React.Component { constructor() { super(); this.data = 'info'; } }
class Child extends Parent { render() { return {this.data} } }

Correct approach:

function Parent() { const data = 'info'; return }
function Child({ data }) { return {data} }

Root cause:

Confusing inheritance with data flow; React uses props for passing data, not inheritance.

#3 Trying to reuse logic by copying code instead of composing.

Wrong approach:

function ComponentA() { /* logic */ }
function ComponentB() { /* copied logic from A */ }

Correct approach:

function useSharedLogic() { /* logic */ }
function ComponentA() { useSharedLogic(); }
function ComponentB() { useSharedLogic(); }

Root cause:

Not recognizing hooks and composition as tools for logic reuse leads to code duplication.

Key Takeaways

Composition and inheritance are two ways to reuse code, but React and Next.js favor composition for UI components.

Composition builds components by combining smaller parts, making code flexible, clear, and easy to maintain.

Inheritance creates tight links between components that can cause fragile and hard-to-change code.

Using props and hooks enables powerful composition patterns that avoid the pitfalls of inheritance.

Understanding when and how to use composition versus inheritance leads to better, more maintainable Next.js applications.

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