Components follow single-responsibility principle

A component that fetches data, transforms it, manages multiple unrelated state slices, and renders three distinct UI panels cannot be tested in isolation, reused elsewhere, or modified safely. ISO 25010 maintainability.modularity and reusability both degrade: a change to the API call shape ripples into the rendering logic and breaks tests that only intended to cover the UI. AI-generated "God components" in app/page.tsx are a common failure mode — the model writes one large coherent component because it never has to maintain it.

Extract data fetching into server components or custom hooks, leaving rendering components purely presentational. For Next.js App Router:

// app/dashboard/page.tsx (server component — fetches)
export default async function DashboardPage() {
  const data = await fetchDashboardData()
  return <DashboardView data={data} />
}

// components/DashboardView.tsx (client component — renders)
export function DashboardView({ data }: { data: DashboardData }) {
  // pure rendering logic only
}

A useful heuristic: if you can't describe what a component does in one sentence without the word "and," split it.