03-app-structure/08-components-vs-features-vs-sections.md
Components vs Features vs Sections
Components vs Features vs Sections
Understanding the difference between components, sections, and features is critical for keeping Vroq apps structured and maintainable.
These three concepts represent different ownership levels in the UI architecture.
Components
Components are **reusable UI building blocks**.
Characteristics:
- mostly presentation logic
- may use local state
- usually receive data via props
- should not depend heavily on the global store
Examples:
ToolbarFileCardStatusBadge
Use a component when the logic is mostly UI composition and could reasonably be reused.
Sections
Sections are **feature-local UI fragments**.
Characteristics:
- often read from the store
- may dispatch actions
- belong to one feature
- help split large feature UI into smaller pieces
Examples:
FileListSectionDebuggerSection
Sections improve readability and keep large features manageable.
Features
Features represent **a coherent slice of application behavior**.
A feature typically owns:
- reducer
- actions
- feature sections
- API client
Examples:
features/filesfeatures/debugger
Features group state, UI, and logic that belong together.
Decision guide
Use this simple decision tree:
If the logic is mostly reusable UI → **component**
If the UI fragment belongs to one feature and uses store → **section**
If the behavior includes state, actions, and UI → **feature**
Final rule
Prefer clear ownership boundaries:
- components → reusable UI
- sections → feature-local UI
- features → full behavior slices