Single-responsibility components (often called “atomic” or “composable”) are not new. Yet in 2025, I still see teams building massive, god-like components that do everything: layout, styling, data fetching, state management, and business logic.
What Single-Responsibility Really Means
A component should do one thing, and do it well. That “thing” can be:
- Purely presentational (
Button,Card) - Layout wrapper (
Grid,Stack) - State container (
TodoList) - Business logic (
CartSummary)
Why It Matters
- Readability — You can understand a component in 30 seconds
- Reusability — Tiny pieces are easy to reuse across projects
- Testability — Small units = small, focused tests
- Maintainability — Change one thing without breaking everything
Real-World Example
Instead of:
<UserProfileCard user={user} onEdit={handleEdit} />Do:
<UserAvatar src={user.avatar} />
<UserName name={user.name} />
<UserBio bio={user.bio} />
<EditButton onClick={handleEdit} />Each child component is small, predictable, and composable.