Un-Suck Your React Components - Composable & Compound Components

Learn how to apply component composition to solve prop-drilling and make your components more flexible. Take your components to the next level by using the context API and building Compound Components.

For more content:

0:00 Intro
0:56 Problem Explanation
2:01 Component Composition
7:20 Adding the Context API
12:56 Compound Components
15:45 Outro

Tech used in this tutorial:
- HTML / CSS
- React.JS
- TypeScript

[codevincas]

Sorry for the gaps from 4:56 to 5:00 and 5:05 to 5:09, editing fail, will try to double check better in the future 🤦‍♂

[kr]

I've been using the compound component pattern for a while and this is a great visual explanation of the benefits and how it's implemented.
The pattern is a good example for Separation of Concerns / SOLID principles — Single responsibility, Open-Close, Dependency inversion.

[xacxdcx]

Man keep these types of videos coming and you will be one of the top TS/React youtubers in no time. I would like to ask for the next videos if you could dive deeper into the pros or cons. Thanks and best of luck! :)

[CottidaeSEA]

Really clean video, showed the process really well. I think the really great thing about this approach is that you can easily create variants. It is really good if you need to use the same code base to support multiple clients for example.

[Irakli]

10 seconds in and I’d already subscribed! Really liked this tutorial, looking forward to your future content. YouTube needs a lot more React design pattern videos like this.

[serjmarkelov]

That's exactly what I've been looking for!
Thank you man! Please don't stop posting videos, I'd rather watch your tutorials than netflix

[sauliussirvydas]

Really great concept that can actually be applied to almost any front-end framework that's out there today, thanks for sharing!

[lucascampos]

This video has insane value. I'm working on my own web app, and this concept, when well applied and in the right situation, is a game-changer. The code without it, turns out to be simply a mess, but when applied properly, it provides the exact modularity needed. Awesome!

[valen]

I like how you always type 'Node' as 'NOde' haha

[Krzysiekoy]

This looks like a very fun pattern to use. At first I was not sold on the whole namespace thing with Component.Name but it grew on me.

[lukecartwright]

This code looks so clean! I love refactoring code videos

[robwatson]

What a great way to group components and their relevant data. I've been using React in production for nearly a year now and it never occurred to me to use a Context at this deep level before.

Really good video, thanks for sharing!

[adiutama]

Thank you for making this video. I like how you explain this concept. It's easy to understand.

[tomshieff]

Very nice! I never thought of using the context API like this, this is super useful, thanks!

[rjwhite]

This video is amazing. I learned so much from this!! Keep making content like this

[neel]

I literally faced this problem on a project i am working on right now. Thank you!

[psyferinc.]

you content is perfect to level up. i hope you dont stop

[MisraPreetiman]

Sam Selikoff has a great set of videos on implementing RadixUI components which follow a similar design. In fact, once I saw the end result of using the Context API to make the components modular I couldn’t help but think I had seen it somewhere before.

It was a great video and I learned a lot! Subbed 😊

[patrickantoniocastro]

This is such a fun and informative video. Love it!

[DioArsya]

danggg it! I've seen this pattern started from headless-ui a couple years ago and nowadays as my experience increases, I see a lot more, the most recent is radix-ui which I (we) love hahaha

I try to learn this kind of approach back then from headless-ui, sadly I understand nothing, lol. A couple years later, I try to learn again from headless-ui and radix-ui, then your video showed up at the very right time.

thank you for making a very clear tutorial and a good example whereas this kind of card can be very complex at some point. I really enjoy watchin this video a couple of times.

Thanks! 🙌