Composition vs inheritance in NextJS - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Next.js component using composition?

Consider the following Next.js functional components using composition. What will be displayed on the page?

NextJS

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

function Alert() {
  return <Button><strong>Warning!</strong> Check your input.</Button>;
}

export default function Page() {
  return <Alert />;
}

A <button>Warning! Check your input.</button>

B <button><strong>Warning!</strong> Check your input.</button>

C <strong>Warning!</strong> Check your input.

D Error: children prop missing

💡 Hint

Look at how the children prop is passed and rendered inside the Button component.

The Alert component uses composition by passing JSX as children to the Button component. The Button renders its children inside a <button> element, so the output includes the <strong> tag inside the button.

🧠 Conceptual

intermediate

Which statement best describes inheritance in React/Next.js?

In React and Next.js, what is a key reason developers prefer composition over inheritance?

A Inheritance allows sharing code by extending components, but React discourages it because it complicates component reuse and flexibility.

B Inheritance is the recommended way to share state between components in React and Next.js.

C Inheritance automatically manages component lifecycle methods better than composition.

D Inheritance is required to use hooks like <code>useState</code> and <code>useEffect</code>.

💡 Hint

Think about how React components are designed to be combined.

React encourages composition because it is simpler and more flexible than inheritance. Inheritance can make components tightly coupled and harder to reuse. Hooks and functional components work best with composition.

📝 Syntax

advanced

Which Next.js component code correctly uses composition to wrap content with a layout?

Choose the option that correctly composes a Layout component wrapping page content.

A

function Layout({ content }) {
  return <div className="layout">{content}</div>;
}

export default function Page() {
  return <Layout content={<h1>Home</h1>} />;
}

B

function Layout() {
  return <div className="layout"><children /></div>;
}

export default function Page() {
  return <Layout><h1>Home</h1></Layout>;
}

C

function Layout({ children }) {
  return <div className="layout">{children}</div>;
}

export default function Page() {
  return <Layout><h1>Home</h1></Layout>;
}

D

function Layout() {
  return <div className="layout">{this.props.children}</div>;
}

export default function Page() {
  return <Layout><h1>Home</h1></Layout>;
}

💡 Hint

Remember how functional components receive children as a prop.

Option C correctly uses the children prop to wrap content. Option C tries to render <children /> which is invalid JSX. Option C uses a different prop name but works, but the question asks for composition with children. Option C uses this.props which is invalid in functional components.

🔧 Debug

advanced

What is rendered by this Next.js component using inheritance?

Examine the code below. What will be rendered when this is used?

NextJS

import React from 'react';

class BaseComponent extends React.Component {
  render() {
    return <p>Base content</p>;
  }
}

class ChildComponent extends BaseComponent {
  render() {
    return <div>{super.render()} and child content</div>;
  }
}

export default function Page() {
  return <ChildComponent />;
}

A The code is valid and will render: <div><p>Base content</p> and child content</div>.

B Error: The ChildComponent must call super() in the constructor before using render().

C React does not support class components extending other class components.

D Error: Using super.render() inside JSX causes a React error because it returns a React element, which cannot be nested this way.

💡 Hint

Think about what super.render() returns and how JSX handles React elements as children.

The code renders without error. super.render() returns a React element from the base class, which is validly nested inside the child <div>. However, React strongly discourages inheritance for sharing behavior between components, favoring composition instead, as inheritance often leads to inflexible and hard-to-maintain code.

❓ state_output

expert

What is the final count displayed after clicking the button twice in this Next.js component using composition?

Consider this Next.js functional component using composition and state. What number will be shown after clicking the button two times?

NextJS

import { useState } from 'react';

function CounterButton({ onClick }) {
  return <button onClick={onClick}>Increment</button>;
}

export default function Page() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <CounterButton onClick={handleClick} />
    </div>
  );
}

A Count: 0

B Count: 2

C Count: 3

D Count: 1

💡 Hint

Remember how React batches state updates and how the current state value is captured in closures.

Each button click calls handleClick() once. Inside handleClick, the two setCount(count + 1) calls capture the same count value (stale closure) and are batched by React, resulting in only one increment per click. After two clicks, the count is incremented twice, displaying 2.

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