Composition over Inheritance
React favors composition over inheritance. Instead of extending a base component, you compose behavior by nesting components and passing children. The React team has never found a use case where inheritance is better than composition.
Composition is LEGO — you snap independent bricks together to build anything. Inheritance is a Russian nesting doll — each doll is trapped inside the shape of its parent.
Composition patterns include: children prop for generic containers, specialized components that configure a general one via props, and render props for injecting behavior. A Layout component that wraps content with <Sidebar> and <Header> is composition. Slots can be achieved by passing JSX as named props: <Page header={<Header />} sidebar={<Nav />}>. This is more flexible than inheritance because each piece can be independently tested and replaced.
React's composition model aligns with functional programming principles — components are pure functions from props to JSX. This makes them composable like mathematical functions: f(g(x)). Context provides an escape hatch for cross-cutting concerns without explicit prop passing. The children prop is essentially an 'inversion of control' pattern — the parent decides what renders inside the child's layout. This enables patterns like headless UI libraries where the hook/logic component inverts control to the consumer for rendering.
React exclusively uses composition over inheritance. I compose UIs by nesting components, using children props, and passing JSX as named props for slot-like patterns. This gives better separation of concerns, easier testing, and more flexibility than inheritance hierarchies. The React team explicitly recommends against class inheritance for component reuse.
Creating deeply nested wrapper components ('wrapper hell') when a custom hook would be cleaner. Composition is for UI structure; hooks are for stateful logic reuse.