component-patterns

Compound components solve prop drilling by letting related sub-components share implicit state without passing props through every level. Use patterns like `Tabs` or `Accordion` where `Tabs.Panel` accesses state from its parent `Tabs` via React Context, eliminating intermediate prop chains.

Controlled components receive state from a parent prop and call callbacks to update it; uncontrolled components manage their own internal state. Implementing both patterns in a single component maximizes flexibility—users can either pass a value prop for external control or omit it for self-managed behavior.

Composition patterns attach sub-components as properties on the parent, like `Card.Header`, `Card.Body`, and `Card.Footer`. This API lets users compose complex layouts from focused, reusable pieces while keeping the parent component clean and the structure declarative.

Render props give child components access to parent state and logic by accepting a function that returns JSX. Use this when you need granular control over what renders or when multiple children need the same stateful logic without creating nested wrapper components.

Yes. TypeScript typings work seamlessly with compound components, render props, and composition patterns. Properly typing Context, prop interfaces, and children render functions provides full type safety while building flexible, reusable component APIs.

React Context and hooks are core tools for advanced patterns. Context shares implicit state between compound components; hooks like `useContext` and `useState` power both controlled behavior and pattern logic with cleaner syntax than class-based alternatives.