react-composition

name	React Composition
description	CONSTRUIR componentes React flexibles y mantenibles usando componentes compuestos, variantes explícitas y desacoplamiento de estado. Prevenir la proliferación de props booleanas usando composición sobre configuración. Patrones React 19.2: sin forwardRef, usar use() para contexto. Activadores: refactorizar componentes con props booleanas, construir bibliotecas de componentes, diseñar APIs de componentes flexibles.
license	MIT
metadata	{"author":"vercel","version":"2.0.0","last_updated":"2026-06-28T00:00:00.000Z"}
stacks	["React 19.2","Next.js 16"]
tags	["composition","compound-components","react-19"]
related_skills	["component-architecture-patterns","full-stack-file-tree-architecture","accessibility-audit-protocol","react-best-practices"]
category	react
version	2.0.0
lang	es
direction	ltr
source_version	2.0.0
translated_at	2026-06-29T00:00:00.000Z

Patrones de Composición en React

IDENTIFICAR: Cuándo activarse

Activar cuando:

• Un componente tiene ≥3 props booleanas que alternan modos de comportamiento
• Se construyen bibliotecas de componentes reutilizables o sistemas de diseño
• Se refactorizan componentes monolíticos en partes componibles
• El componente usa forwardRef (React 19+ lo hace innecesario)
• El componente usa props renderX (renderHeader, renderFooter, etc.)

DECIDIR: Cuándo aplicar cada patrón

SI el componente tiene 3+ props booleanas (isDestructive, isFullscreen, isCompact) →
  APLICAR patrón de variantes explícitas → reemplazar booleanos con prop `variant` tipada

SI el componente tiene múltiples subelementos relacionados (Select, Accordion, Tabs) →
  APLICAR patrón de componentes compuestos → contexto compartido + subcomponentes

SI el componente crea estado que necesitan componentes hermanos →
  APLICAR patrón de elevación de estado → mover estado al proveedor

SI el componente usa props renderX →
  APLICAR patrón children sobre render props → usar prop children

SI el componente usa forwardRef →
  APLICAR patrón React 19 → eliminar forwardRef, pasar ref como prop normal

SI el componente usa useContext →
  APLICAR patrón React 19 → usar `use()` en lugar de `useContext()`

EJECUTAR: Instrucciones

Patrón 1: Variantes Explícitas Sobre Props Booleanas

// ❌ PROLIFERACIÓN DE BOOLEANOS, 3+ booleanos para modos
<Button isDestructive isLarge isFullWidth />

// ✅ VARIANTES EXPLÍCITAS, prop tipada, única fuente de verdad
type ButtonProps = {
  variant: 'default' | 'destructive' | 'outline' | 'ghost';
  size: 'sm' | 'md' | 'lg';
  isFullWidth?: boolean;
} & ComponentProps<'button'>;

export function Button({ variant = 'default', size = , isFullWidth =  }: ) {
   ;
}