React Component Architecture

Component Design Principles

1. Single Responsibility - Each component does one thing well
2. Composition Over Configuration - Use children and render props over prop drilling
3. Colocation - Keep related code together (styles, tests, types)
4. Controlled vs Uncontrolled - Be explicit about state ownership

Component Patterns

Compound Components

For complex UI with shared state:

const Tabs = ({ children, defaultValue }: TabsProps) => {
  const [active, setActive] = useState(defaultValue);
  return (
    <TabsContext.Provider value={{ active, setActive }}>