component-architecture

name	Component Architecture
description	SEPARAR contenedores (lógica de datos/negocio) de componentes presentacionales (solo UI). Prevenir componentes dios, perforación de props y bundles de cliente innecesarios. Hooks personalizados unen datos y UI. TanStack Query v5+ para toda obtención de datos del cliente. Server Components por defecto en Next.js. Activadores: "create (a|a) component", "build (the|a) UI", "refactor (the|the) frontend", archivo de componente excede 250 líneas.
category	frontend
version	3.0.0
last_updated	2026-06-28T00:00:00.000Z
stacks	["React 19.2","Vue 3","Next.js 16","Nuxt","SvelteKit"]
related_skills	["full-stack-file-tree-architecture","empty-loading-error-states","accessibility-audit-protocol","react-composition","react-best-practices"]
lang	es
direction	ltr
source_version	3.0.0
translated_at	2026-06-29T00:00:00.000Z

Patrones de Arquitectura de Componentes

IDENTIFICAR: Cuándo activarse

Activar cuando:

• Se construye una nueva página o funcionalidad de UI compleja
• Un archivo de componente excede 250 líneas
• El usuario dice "refactor the frontend" o "split this component"
• Se añade lógica de obtención de datos a un componente UI

PRINCIPIO FUNDAMENTAL

Cada componente es de uno de dos tipos:

Tipo	¿Estado de dominio?	¿Solo estado UI?	¿Efectos secundarios?	Ejemplo
Contenedor	Obtiene, gestiona o muta datos de dominio	Puede tener también estado UI	Sí	UserProfilePage, DashboardLayout
Presentacional	NUNCA toca datos de dominio	Puede tener estado UI local	No	Button, Card, Collapsible, Tabs

MATIZ CRÍTICO: El estado UI (isOpen, activeTab) está BIEN en componentes Presentacionales. Los datos de dominio (user, orders, projects) NO.

REGLA: Un componente Presentacional NUNCA DEBE importar funciones de obtención de datos, clientes API o consumidores de contexto de dominio. Los datos de dominio fluyen SOLO a través de props.

DECIDIR: Selección de Arquitectura

SI se construye desde cero →
  EJECUTAR Pasos 1-5 en orden

SI el componente excede 250 líneas →
  EJECUTAR Paso 6 (flujo de división)

SI el componente existente tiene 5+ props →
  CONSIDERAR composición (react-composition/SKILL.md)

SI el componente es UI pura (Button, Card, Input) →
  SALTAR al Paso 2 (crear solo Presentacional)

SI es full-stack (Next.js App Router) →
  PREFERIR Server Components (Paso 5)
  Solo usar 'use client' para hojas interactivas

EJECUTAR: Instrucciones

Paso 1: Definir Requisitos de Datos Primero

Antes de escribir cualquier JSX, listar qué datos necesita la funcionalidad:

Funcionalidad: [nombre]
Datos necesarios:
  - [fuente de datos 1]
  - [fuente de datos 2]
  - [fuente de datos 3]
Fuentes:
  - GET [endpoint 1]
  - GET [endpoint 2]

Paso 2: Crear Componentes Presentacionales

Componentes UI puros que reciben datos a través de props:

  = {
  : ;
  : ;
  ?:  | ;
};

  () {
  
   [isExpanded, setIsExpanded] = ();

   (
    
  );
}