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.