Introducción

Algo que es muy útil y completo en el mundo de React son sus patrones de diseño, ya que ayudan a mantener el código escalable y añaden significado a los componentes que creamos.

Hay varios patrones, y en este artículo hablaremos sobre componentes compuestos, un patrón avanzado que es especialmente útil para crear interfaces compuestas flexibles.

¿Qué son los componentes compuestos?

Compound Components es un patrón avanzado en React. Su objetivo es crear un diseño más flexible, que permita compartir el estado y la lógica entre un grupo de componentes, donde la comunicación entre el componente principal y los componentes secundarios debe realizarse de manera flexible.

Los componentes deben trabajar juntos para realizar algún comportamiento sin crear árboles de accesorios embarazosos o lógica que sea demasiado compleja para ser refactorizada o comprendida en el futuro.

Este patrón nos ayuda a eliminar el flameo de accesorios, donde tenemos que pasar un árbol de accesorios entre los componentes. Esta inyección de accesorios es un problema ya que puede causar múltiples renderizaciones innecesarias con cada estado que se actualiza, ya que cada estado actualizará todos los componentes secundarios.

Tenemos un ejemplo de Componentes Compuestos en la estructura de etiquetas de selección y opción en HTML:

La selección funciona como un administrador de estado de la interfaz, mientras que las opciones se configuran sobre cómo debería funcionar la selección.

Ejemplo de uso de componentes compuestos

En este ejemplo, crearemos un modal, que se divide en dos componentes compuestos: Toggle y Content. Donde compartirán el estado de apertura y cierre del modal entre ellos.

Veamos cómo sería crear este componente paso a paso:

Podemos comenzar creando el contexto responsable de gestionar el estado de apertura y cierre del modal

Creando la base del componente Modal

Tenga en cuenta que estamos usando elementos secundarios, para obtener los componentes que se insertarán en el Modal, querremos usarlo así:

Ahora necesitamos crear el componente de alternancia, que será responsable de abrir el Modal

También necesitamos el componente de contenido que será responsable de mostrar el contenido del Modal

Finalmente podemos asignar ambos a nuestro componente Modal y listo (:

Usando

Resultado

De esta manera, hacemos que la creación y el uso de modales sean extremadamente flexibles y reutilizables. Modal.Toggle es responsable de activar la visualización modal, mientras que Modal.Content debe mostrar el contenido de nuestro modal.

Este marco permite a los desarrolladores personalizar fácilmente el comportamiento y el contenido de los modales según las necesidades específicas de sus aplicaciones, haciendo que el código sea más limpio y organizado.

Otros ejemplos

También podemos usar Componentes Compuestos en otros contextos, por ejemplo:

Componentes de acordeón:

Componentes del menú:

Todos son flexibles y adaptables, facilitando el desarrollo, escalabilidad y uso del componente.

Conclusión

Vimos cómo escribir componentes en el patrón Compound Components puede ser útil en nuestras aplicaciones, también vimos cómo usarlo y algunos ejemplos donde este patrón puede encajar.

Siéntete libre de explorar y jugar creando componentes con Compoud Components, úsalo sabiamente y ve si realmente tiene sentido aplicarlo en tu contexto, a veces, si no se aplica bien, puede ser más un obstáculo que una ayuda.

NOTA: Publiqué este mismo contenido en reaccionar4noobs, un repositorio diseñado para agrupar artículos creados por desarrolladores en el universo de reacción. Vale la pena echarle un vistazo =).