Why does React prefer composition over inheritance?

React components are functions, not class hierarchies. Instead of extending a base component, you pass content into a generic container or extract shared behaviour into a hook.

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

function Profile() {
  return (
    <Card>
      <Avatar />
      <h2>Asha</h2>
    </Card>
  );
}

Other composition patterns

• children for layout and container components
• Render props for passing rendering logic into a component
• Higher-order components for wrapping behaviour
• Custom hooks for sharing stateful logic without changing the component tree

Inheritance couples a child to a parent's implementation and makes it hard to combine behaviours from multiple sources. Composition lets each component stay focused and lets the caller decide what to render.