page-component-decomposition

What problem does it solve?

It prevents frontend pages from turning into giant, hard-to-test components by enforcing clear responsibilities, correct state ownership, and side-effect boundaries.

Core Features & Use Cases

• Responsibility-first decomposition: Enforces exactly one primary responsibility per component to reduce coupling and improve testability.
• State ownership and reset clarity: Keeps state at the nearest component that can update, validate, and reset it correctly to avoid prop drilling and unclear lifecycle behavior.
• Side-effect and permission boundaries: Prohibits data fetching, navigation, and authorization checks inside presentational components so behavior stays visible and testable.

Quick Start

Ask for a component decomposition plan for your page by describing the current component’s responsibilities, where state is stored, and which parts fetch data, validate inputs, or perform permission checks.