component-architecture-patterns

Component Architecture Patterns

🏗️ COMPONENT DESIGN PATTERNS (From Sprint 10 Lessons)

Based on architectural review findings and real refactoring experiences during Sprint 10.

🚨 ANTI-PATTERN: "God Components" (Sprint 10 Discovery)

The Problem - Large Monolithic Components

// ❌ ANTI-PATTERN: 424-line HomePage component
export default function HomePage() {
  // State management (50+ lines)
  const [backendStatus, setBackendStatus] = useState<'loading' | 'ok' | 'error'>('loading')
  const [setupStep, setSetupStep] = useState(1)
  const [healthStatus, setHealthStatus] = useState<'loading' | 'ok' | 'error'>('loading')
  
  // Color mode values (20+ lines)
  const sidebarBg = useColorModeValue('white', 'gray.800')
  const textColor = useColorModeValue('gray.800', 'white')
  const mutedTextColor = useColorModeValue('gray.600', 'gray.300')
  // ... 15+ more color definitions
  
  // Effects and handlers (100+ lines)
  useEffect(() => {
    const checkBackendHealth = async () => {
      // Complex health check logic
    }
    checkBackendHealth()
    const interval = setInterval(checkBackendHealth, 30000)
    return () => clearInterval(interval)
  }, [])
  
  // More effects...
  useEffect(() => {
    if (backendStatus === 'ok' && collection) {
      setSetupStep(3)
    } else if (backendStatus === 'ok') {
      setSetupStep(2)
    } else {
      setSetupStep(1)
    }
  }, [backendStatus, collection])
  
  // Complex render logic (200+ lines)
  return (
    <Box minH="100vh">
      {/* Massive JSX structure */}
    </Box>
  )
}

Problems with this approach:

• Performance: Entire component re-renders on any state change
• Maintainability: Hard to understand and modify
• Testing: Difficult to test individual features
• Reusability: Logic tied to specific component
• Debugging: Hard to isolate issues

✅ SOLUTION: Component Composition Pattern

1. Extract Logical Sections

// ✅ PATTERN: Focused, single-responsibility components
export default function HomePage() {
  return (
    <Box minH="100vh">
      <Header />
      <Flex>
        <SystemStatusSidebar />
        <MainContent />
      </Flex>
      <CollectionModal />
      <AddImagesModal />
    </Box>
  )
}

// ✅ Each component has a single responsibility
function SystemStatusSidebar() {
  const { backendStatus, setupProgress } = useSystemHealth()
  
  return (
    <Sidebar>
      <SetupProgress progress={setupProgress} />
      <SystemStatus status={backendStatus} />
      <CollectionStats />
    </Sidebar>
  )
}

function MainContent() {
  const { setupStep } = useSystemHealth()
  
  return (
    <Container>
      <HeroSection />
      {setupStep >= 3 ? <FeaturedActions /> : <SetupGuidance />}
      <AdditionalTools />
    </Container>
  )
}