Video Description

Welcome to Day 03 of 15 Days of React Design Patterns – Clean Code Made Easy! In this session, we dive deep into one of the most powerful patterns in React — the Compound Components Pattern. Have you ever written a Modal or Accordion component and ended up passing a soup of props (title, body, actions, footerButtons, showHeader, etc.) just to make it work? That’s a code smell — it makes components rigid, bloated, and painful to scale. The Compound Components Pattern solves this problem by letting child components (Modal.Header, Modal.Body, Modal.Footer, etc.) communicate with their parent implicitly. This approach creates cleaner APIs, flexible composition, and makes your components feel as natural as writing plain HTML. ⚡ What’s inside this video: ✅ What the Compound Components Pattern is and why it matters. ✅ How to refactor messy prop-heavy components into clean, composable APIs. ✅ Real-world use cases like building Modals, Accordions, Tabs, and Dropdowns. ✅ Common pitfalls juniors make and how to avoid them. ✅ Building a messy component to fix it with a controlled component. How this pattern is used in production-grade design systems (e.g., libraries like Radix UI, React Aria, Material UI). This isn’t just theory — we’ll refactor real code together so you can see the impact immediately. Timecodes 0:00 - Day 03 00:39 - We Will Learn 01:38 - Prerequisites 02:57 - The Prop Soup 09:48 - The Problems 14:00 - The Compound Components Pattern 18:30 - Applying the Pattern to Messy Modal 36:10 - Implementing Accordion 40:37 - Use Cases 41:56 - PitFalls & Anti-Patterns 43:43 - Tasks & Wrap Up 📌 Subscribe & hit the bell so you don’t miss the upcoming episodes in this 15-day journey. - ⭐ Subscribe: https://www.youtube.com/tapasadhikary - ⭐ Join: https://www.youtube.com/channel/UCaYr5yxgOyk599Mnb3TGh-g/join 💡 If you enjoyed this, check out my other popular series: 40 Days of JavaScript ✅ Start 40 Days of JavaScript: - https://youtu.be/t8QXF85YovE?si=r9sGtJZPtgBl2V27 ✅ Here is another JavaScript Learning Path I recommend: - https://scrimba.com/t0js?via=tapascript ✅ Download the 40 Days of JavaScript Tracker Template: - Link to the template: https://topmate.io/tapasadhikary/382755 ## Important Links - Join My Discord: https://discord.gg/ux9BchWEW3 - Follow tapaScript on GitHub: https://github.com/tapascript - Download the Template: https://topmate.io/tapasadhikary/1737706 - Fake API Repo: https://github.com/tapascript/fake-apis - Source Code Used: https://github.com/tapascript/15-days-of-react-design-patterns - Code in React 19 Repo: https://github.com/atapas/code-in-react-19 ## 👋 Like my work? Thank You! - Join as a Member: https://www.youtube.com/channel/UCaYr5yxgOyk599Mnb3TGh-g/join - Sponsor Me: https://github.com/sponsors/atapas - Sponsor my Blog: https://blog.greenroots.info/sponsor ## 🤝 My Links: - Blog: https://blog.greenroots.info/ - Follow on X(Twitter): https://twitter.com/tapasadhikary - Connect on LinkedIn: https://www.linkedin.com/in/tapasadhikary/ - Follow My Work on GitHub: https://github.com/atapas ## About Me: Tapas Adhikary is an Educator at tapaScript, a Tech enthusiast, Writer, YouTuber, and maintainer/contributor of open-source projects. He is a full-stack developer with vast experience building SaaS solutions. He is the founder of the ReactPlay platform, which is driven by open-source projects and a fast-growing community. You can find more about him at https://tapasadhikary.com & https://tapascript.io #reactjs #designpatterns #reactcourse #learnreact