Component Architecture

Overview

Component architecture is the way UI responsibilities are split across composable pieces.

Why It Matters

Good component structure keeps UI logic reusable without making it abstract and opaque.

Core Concepts

• Components should have clear responsibilities.
• Compose behavior instead of burying it.
• Keep presentation and logic appropriately separated.

Mental Models

Ask whether a component is responsible for data, layout, behavior, or composition.

Best Practices

• Split container and presentational concerns when it helps.
• Keep props purposeful.
• Prefer composition over deep prop drilling where it fits.

Common Mistakes

• Making every component do everything.
• Creating a wrapper for every one-off variation.
• Over-abstracting simple layout.

Trade-offs

Smaller components can improve reuse, but too many layers can hide the actual behavior.

Decision Framework

Examples

• Use a shared Button for consistent interaction.
• Keep a one-off screen section local when reuse is unlikely.

Checklists

• Does each component have one obvious job?
• Are props limited and readable?
• Can the UI flow be understood from the tree?

Senior Engineer Notes

Senior engineers optimize for readable composition, not maximal reuse. Reuse should follow the shape of the problem.

Further Reading

• React
• Design Systems
• Patterns