Patrones de Desarrollo Frontend

Patrones modernos de frontend para React, Next.js e interfaces de usuario de alto rendimiento.

Cuándo Activar

• Construir componentes React (composición, props, renderizado)
• Gestionar estado (useState, useReducer, Zustand, Context)
• Implementar obtención de datos (SWR, React Query, server components)
• Optimizar rendimiento (memoización, virtualización, code splitting)
• Trabajar con formularios (validación, inputs controlados, esquemas Zod)
• Manejar routing y navegación del lado del cliente
• Construir patrones de UI accesibles y responsivos

Patrones de Componentes

Composición sobre Herencia

// PASS: BIEN: Composición de componentes
interface CardProps {
  children: React.ReactNode
  variant?: 'default' | 'outlined'
}

export function Card({ children, variant = 'default' }: CardProps) {
  return <div className={`card card-${variant}`}>{children}</div>
}

export function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="card-header">{children}</div>
}

export function CardBody({ children }: { children: React.ReactNode }) {
  return <div className="card-body">{children}</div>
}

// U…