What is React component composition vs inheritance?

In React, composition means building components by combining smaller components together, while inheritance means trying to reuse component behavior by extending one component from another.

React strongly prefers composition over inheritance because it is more flexible, simpler, and aligns better with how UI is designed.

1. What is Composition?

Composition means you build complex UIs by nesting components inside other components.

Instead of trying to reuse behavior through class hierarchies, you reuse code by passing components, props, or children.

React uses composition in multiple ways:

```jsx function Button({ label }) { return <button>{label}</button>; }

function App() { return <Button label="Click Me" />; } ```

```jsx function Card({ children }) { return <div className="card">{children}</div>; }…