React · Theory

Composition vs Inheritance in React

Theory

69/94

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.

Exam tip

children example vs extends.

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.

Short notes

DefPrefer : children / wrappers / hooks.
RuleAvoid : SaleCard extends Card.
RememberWhy : brittle UI trees.

// 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

Example

Short notes

Questions

Composition vs Inheritance in React

Example

Short notes

Questions