--- title: ⚛️ 🚀 React Component Patterns | daily.dev description: Compound components is a pattern where components are used together such that they share an implicit state that lets them communicate with each other in the... canonical: https://daily.dev/posts/react-component-patterns-uxpzagyde twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: ⚛️ 🚀 React Component Patterns | daily.dev og:description: Compound components is a pattern where components are used together such that they share an implicit state that lets them communicate with each other in the... og:url: https://daily.dev/posts/react-component-patterns-uxpzagyde og:image: https://api.daily.dev/og/posts/UxPZaGYDe.png og:image:alt: ⚛️ 🚀 React Component Patterns og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # ⚛️ 🚀 React Component Patterns **[DEV](https://daily.dev/sources/devto)** · 14 min read · 10 upvotes · 1 comments ## Summary Compound components is a pattern where components are used together such that they share an implicit state that lets them communicate with each other in the background. A compound component is composed of a subset of child components that all work in tandem to produce some functionality. This pattern provides flexibility for the consumers of the components. It allows you to abstract the internal workings of your components. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@idoshamun** · 0 upvotes > The post introduces 3 patterns: > 1. Compound > 2. Flexible compound > 3. Provider > The only thing he could improve is to provide functional examples as well and not just class style. --- Tags: [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/react-component-patterns-uxpzagyde) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"⚛️ 🚀 React Component Patterns","url":"https://daily.dev/posts/react-component-patterns-uxpzagyde","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/react-component-patterns-uxpzagyde"},"datePublished":"2020-08-27T00:15:10.983Z","dateModified":"2021-10-07T14:17:10.317Z","description":"Compound components is a pattern where components are used together such that they share an implicit state that lets them communicate with each other in the...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ec86a3e1451ec0d90d9f7fe2d7c5be24","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ec86a3e1451ec0d90d9f7fe2d7c5be24","isAccessibleForFree":true,"articleSection":"DEV","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"DEV","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/devto","url":"https://daily.dev/sources/devto"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/react-component-patterns-uxpzagyde","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":10},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"react","timeRequired":"PT14M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":3,"name":"⚛️ 🚀 React Component Patterns"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/react-component-patterns-uxpzagyde","comment":[{"@type":"Comment","text":"The post introduces 3 patterns:\n\nCompound\nFlexible compound\nProvider\nThe only thing he could improve is to provide functional examples as well and not just class style.","datePublished":"2020-08-27T06:51:30.163Z","url":"https://daily.dev/posts/UxPZaGYDe#c-XmJjw-UnT","author":{"@type":"Person","name":"Ido Shamun","url":"https://daily.dev/idoshamun","image":"https://media.daily.dev/image/upload/s---xy_OAwk--/f_auto,q_auto/v1703781380/avatars/avatar_28849d86070e4c099c877ab6837c61f0"}}]} ```