client-component-architecture

Use a three-tier React component architecture where Page acts as a Compositor for layout and async boundaries, Feature components own their UI state, and Hook layers isolate data fetching and side effects. This ensures clear separation of concerns.

Organize React hooks by splitting roles into useGet* for data fetching, use* for UI state, and use*Action for side effects. This dedicated hook layer isolates logic and ensures predictable UI development.

Enforce React architecture during code reviews by verifying Page components avoid business logic, Feature components are self-contained and testable, and hooks follow the useGet*, use*, and use*Action role conventions.

A React Page component should avoid business logic because it serves strictly as a Compositor for layout and asynchronous boundaries. Delegating logic to Feature components and Hooks maintains design consistency and improves code reusability.

Yes, the three-tier React component architecture supports large scalable applications by isolating self-contained Feature components and separating Hook roles. This structure maintains team collaboration, testability, and predictable UI development at scale.