Component architecture

Component architecture defines ownership, state boundaries, composition APIs, accessibility contracts, and testing seams for UI at scale. Decisions include smart versus dumb split, design tokens, slot APIs, error boundaries, and how routes map to component trees. Good architecture makes features shippable without global rewrites.

On interviews: design a component tree for a dashboard with loading, error, and empty states. Discuss colocation versus shared library extraction.

Common pitfalls: prop drilling through ten layers; components that fetch, format, and layout simultaneously; missing accessibility on custom widgets.

The trade-off is flexibility versus complexity—know when the simpler path is enough.

Checklist:

• State colocated closest to need.
• Composition APIs documented with examples.
• a11y roles and keyboard paths verified.
• Visual and interaction tests on critical components.