Compound Component Pattern en React JS: Simplificando la Composición y Reutilización de Componentes 2024

El compound component pattern, combinado con el React Context, emerge como una solución eficaz para compartir estado entre componentes de manera implícita. En este post, te mostraré cómo implementarlo.

Si lo anterior te suena en chino, ¡no te preocupes! la primera vez siempre es confuso, pero aquí te lo explico facilito.

De todos modos, puedes complementar con el vídeo que he preparado como parte del curso de Patrones de Diseño en React JS.

¿Qué es el Compound Component Pattern?

El Patrón de Componentes Compuestos en React es un patrón de diseño que, al ser combinado con Contexto de React, permite compartir estado entre componentes relacionados de manera implícita, sin tener que pasar props explícitamente a través de cada nivel del árbol de componentes.

¿Por qué usar Componentes Compuestos con Contexto?

El uso combinado de Componentes Compuestos y Contexto mejora la encapsulación y proporción del estado, evita la "prop drilling" y hace que el código sea más limpio y mantenible.

¿Cómo Implementar el Patrón de Componentes Compuestos con Contexto?

1. Crea tu Contexto:

const ArticleContext = React.createContext()

2. Crea Componentes que Consuman el Contexto: Estos componentes accederán al estado y funciones compartidos a través del contexto.

function Title() {
  const { title } = React.useContext(ArticleContext)
  return <h1>{title}</h1>
}

function Content() {
  const { content } = React.useContext(ArticleContext)
  return <p>{content}</p>
}

3. Combina los Componentes en un Componente Padre con Proveedor de Contexto: Este componente actuará como el componente compuesto, proporcionando el estado y funciones a sus hijos.

function Article(props) {
  return (
    <ArticleContext.Provider value={props}>
      <div>
        <Title />
        <Content />
      </div>
    </ArticleContext.Provider>
  )
}

4. Usa tu Componente Compuesto con Contexto:

<Article title="Título del Artículo" content="Contenido del artículo..." />

Conclusión

El patrón de Componentes Compuestos, en combinación con el Contexto de React, es una herramienta poderosa que facilita el intercambio de estado y funciones entre componentes relacionados, creando aplicaciones más limpias y mantenibles.

Si te ha gustado este análisis sobre el patrón de Componentes Compuestos con Contexto, te invito a explorar los otros patrones avanzados en React JS que he analizado en la guía principal.

Y recuerda, si quieres llevar tus habilidades al siguiente nivel, no te pierdas el curso completo en el Canal de YouTube de Developero.