hierarchy

A scalable React component hierarchy organizes UI into Pages, Organisms, Molecules, and Atoms. Pages fetch server data and pass it down via props, while Organisms contain business logic and hooks to maintain clear separation of concerns.

In an atomic design architecture, place custom hooks and business logic within Organisms. Avoid putting hooks in Atoms or Molecules to keep presentational components pure and ensure clear separation of concerns between data management and UI rendering.

Yes, this component hierarchy is designed for projects using the Pages Router. It enforces page data ownership by having Pages fetch server data and pass it to Organisms, Molecules, and Atoms via props for structured UI development.

The best way to manage page data ownership is to have Pages fetch server data and pass it down to child components via props. This keeps data fetching centralized at the page level and maintains a clear, scalable separation of concerns.

Atoms should not contain business logic because they are foundational UI building blocks. Keeping them pure ensures maximum reusability across the application, while Organisms handle state management and hook placement for specific feature logic.

Organize UI components by mapping each visual pattern to Atoms, Molecules, and Organisms, then compose Pages from these building blocks. This structure dictates where logic lives, ensuring scalable and consistent UI development across pages.