Arquitectura de Componentes Compostables en React: Patrones de Diseño Avanzados

Introducción a la Arquitectura de Componentes en React

Cuando desarrollamos aplicaciones web modernas utilizando React, uno de los desafíos más comunes es mantener la escalabilidad y la legibilidad del código a medida que la interfaz de usuario crece. A menudo nos encontramos creando componentes rígidos que aceptan decenas de propiedades (props), lo que comúnmente se conoce como el antipatrón de prop drilling o componentes inflados.

En este tutorial avanzado, exploraremos cómo transformar componentes monolíticos en piezas modulares altamente colaborativas. Utilizaremos patrones de diseño probados en la industria que te permitirán construir librerías de componentes internas robustas y fáciles de mantener.

El Problema de los Componentes Monolíticos

Para entender el valor de los patrones avanzados, analicemos primero un escenario problemático típico. Imagina que necesitamos construir un componente desplegable (Dropdown) que soporte múltiples configuraciones, botones personalizados, iconos y diferentes estados de apertura.

Un enfoque ingenuo resultaría en algo como esto:

// Componente monolítico difícil de escalar
function Dropdown({ label, items, onSelect, icon, disabled, position, renderCustomItem }) {
  // Lógica compleja interna mezclada con múltiples opciones de renderizado
  return (
    <div className="dropdown">
      <button disabled={disabled}>
        {icon && <span className="icon">{icon}</span>}
        {label}
      </button>
      {/* Lista de elementos con condicionales complejos */}
    </div>
  );
}

A medida que los requerimientos del negocio cambian, este componente requerirá más y más props, volviéndose frágil y propenso a errores. La solución a esto es delegar el control visual al consumidor utilizando patrones de composición.

Patrón 1: Compound Components (Componentes Compuestos)

El patrón de Compound Components imita elementos nativos de HTML como <select> y <option>, donde múltiples componentes trabajan juntos para formar una UI coherente compartiendo un estado implícito.

Implementación del Patrón Compound Components

Para lograr esto en React, combinamos React Context con componentes hijos estáticos. Vamos a construir nuestro propio Dropdown flexible.

import React, { createContext, useContext, useState } from "";

const DropdownContext = createContext();

function Dropdown({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen((prev) => !prev);

  return (
    <DropdownContext.Provider value={{ isOpen, toggle }}>
      <div className="dropdown-container">{children}</div>
    </DropdownContext.Provider>
  );
}

function Toggle({ children }) {
  const { toggle } = useContext(DropdownContext);
  return (
    <button onClick={toggle} className="dropdown-toggle">
      {children}
    </button>
  );
}

function Menu({ children }) {
  const { isOpen } = useContext(DropdownContext);
  if (!isOpen) return null;
  return <div className="dropdown-menu">{children}</div>;
}

function Item({ onClick, children }) {
  return (
    <div className="dropdown-item" onClick={onClick}>
      {children}
    </div>
  );
}

Dropdown.Toggle = Toggle;
Dropdown.Menu = Menu;
Dropdown.Item = Item;

export default Dropdown;

Uso del Componente Compuesto

Ahora el consumidor tiene el control total sobre la estructura HTML y el orden de los elementos, manteniendo la lógica de estado encapsulada:

function App() {
  return (
    <Dropdown>
      <Dropdown.Toggle>Opciones de Usuario</Dropdown.Toggle>
      <Dropdown.Menu>
        <Dropdown.Item onClick={() => console.log("Perfil")}>Mi Perfil</Dropdown.Item>
        <Dropdown.Item onClick={() => console.log("Config")}>Configuración</Dropdown.Item>
        <Dropdown.Item onClick={() => console.log("Salir")}>Cerrar Sesión</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

Patrón 2: Render Props y Function as Child

A veces necesitamos compartir lógica compleja de estado o efectos secundarios (como llamadas a APIs o manejo de eventos de ratón) pero permitiendo que el componente consumidor decida absolutamente todo sobre el diseño visual.

Aquí es donde entra el patrón Render Props.

Creando un Componente con Render Prop

import React, { useState, useEffect } from "";

function WindowMouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);

  return render(position);
}

Aplicando el Patrón

El componente padre utiliza la función proporcionada para renderizar cualquier interfaz basada en la posición del ratón:

function App() {
  return (
    <WindowMouseTracker
      render={({ x, y }) => (
        <div style={{ padding: "20px", background: "#f0f0f0" }}>
          <h1>Coordenadas actuales del cursor:</h1>
          <p>X: <mark>{x}</mark>, Y: <mark>{y}</mark></p>
        </div>
      )}
    />
  );
}

Patrón 3: Control Props (Componentes Controlados y No Controlados)

Los componentes de alta calidad en React deben soportar ambos mundos: operar de manera autónoma (no controlados) o permitir que el componente padre dicte su estado (controlados), similar a cómo funcionan los elementos nativos como <input />.

Implementación de State Sincronizado

import React, { useState } from "";

function Toggle({ on: controlledOn, onChange }) {
  const [uncontrolledOn, setUncontrolledOn] = useState(false);

  // Determinamos si es controlado basándonos en si la prop no es undefined
  const isControlled = controlledOn !== undefined;
  const on = isControlled ? controlledOn : uncontrolledOn;

  const handleClick = () => {
    if (!isControlled) {
      setUncontrolledOn(!on);
    }
    if (onChange) {
      onChange(!on);
    }
  };

  return (
    <button 
      onClick={handleClick}
      className={`toggle-btn ${on ? "active" : ""}`}
    >
      {on ? "Encendido" : "Apagado"}
    </button>
  );
}

Comparativa de Patrones Arquitectónicos

Para elegir el patrón adecuado en tu próximo proyecto, ten en cuenta la siguiente tabla resumen:

Buenas Prácticas y Recomendaciones Finales

Implementar una arquitectura basada en composición requiere disciplina en equipo. Sigue estas pautas para asegurar el éxito:

• Documenta la API de tus componentes: Utiliza PropTypes o TypeScript para definir claramente qué esperan los subcomponentes.
• Valida el contexto: Asegúrate de lanzar errores descriptivos si un subcomponente (ej. Dropdown.Item) se utiliza fuera de su contenedor padre.
• Mantén la separación de incumbencias: Deja que la lógica de negocio resida en hooks personalizados y la estructura de UI en los componentes compuestos.