04-code-organization/03-sections.md

Sections

Sections

A section is a feature-local UI fragment.

Sections are used to split feature UI into smaller, clearer units. A section often reads from the store, dispatches actions, and orchestrates a specific part of a feature.

When to create a section

Create a section when:

• a feature UI file is getting too large
• one part of the feature UI has a clear responsibility
• the UI fragment is easier to understand as a named unit
• the code is store-aware and feature-specific

Examples:

• FileListSection
• FileDetailsSection
• DebuggerSection

What a section should do

A good section should usually:

• own one visible part of a feature UI
• read the state it needs
• dispatch the actions it needs
• keep feature-specific orchestration out of presentational components
• make the feature easier to navigate

What a section should usually avoid

A section should usually avoid:

• becoming a second full feature
• containing raw transport code
• mixing unrelated responsibilities
• becoming so generic that its ownership is unclear

Sections vs components

Use a section when the code is feature-local and store-aware.

Use a component when the code is mostly reusable UI with props and local state.

Final rule

Use sections to keep large feature UI readable while preserving feature ownership and store-awareness.