Composition vs Inheritance in React — React Technical Interview Questions & Answers

Composition vs Inheritance in React

Composition vs Inheritance in React

  • React’s docs say: use composition, not inheritance, for UI. Pass children, render props, or small wrapper components. <Card><h2>Shoes</h2></Card> instead of class SaleCard extends Card. You reuse Card’s shell without a class tree.
  • Inheritance still exists in JS, but UI ‘is-a’ chains get brittle. Share logic with hooks, share layout with children.
  • Composition vs Inheritance in React — on screen: Shoes + 20% off inside Card. children is the composition knob.

Technical Interview Tip: children example vs extends.

Code Examples for Composition vs Inheritance in React

Example

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

export default function Sale() {
  return (
    <Card>
      <h2>Shoes</h2>
      <p>20% off</p>
    </Card>
  );
}

Composition vs Inheritance in React — on screen: Shoes + 20% off inside Card. children is the composition knob.

How to Explain Composition vs Inheritance in React to an Interviewer

How do you compare Composition vs Inheritance on the board? One real difference, one shared idea.

Prefer : children / wrappers / hooks. Avoid : SaleCard extends Card.

What naming trap should you avoid?

Mixing AngularJS with Angular

When would you still pick the other side?

Team skill Existing codebase