Q41: Why does React favor Composition over Inheritance?
React achieves code reuse using Composition (nesting components using children or explicit render props) rather than Class inheritance (extends). Composition is flexible, avoids tight coupling, and prevents deep inheritance hierarchies.
Composition Container Pattern
function Dialog({ header, body, footer }) {
return (
<div className="dialog-box">
<div className="header">{header}</div>
<div className="body">{body}</div>
<div className="footer">{footer}</div>
</div>
);
}💡 Dialog accepts flexible component nodes as props rather than relying on class sub-typing.
Key Takeaways
- Use the
childrenprop or specialized props to pass UI elements. - Composition provides modular, flexible architecture over rigid class trees.
Knowledge Check
Which prop name implicitly receives nested JSX elements placed inside component tags (<Card><p>Text</p></Card>)?