Compound Components in React (Design Patterns)

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

In this video we will talk about compound components in React. Compound components is a great design pattern to adopt in React. It allows you to break apart a component into multiple sub-components that are meant to be used together. You can bind them together and have them share data through context, and it will allow you to have a modular component that you can re-use in any page in any way that you want.

[kouameyaojean]

I've been hearing about the compound component for over a year. You've clarified it now. All the examples talked about select. Thanks

[rjwhite]

I've seen tutorials on this topic before, but this one does a way better job explaining on why to use the context. Thank you!

[ariyoujahan]

18:07 این نیز بگذرد. 😊

You are absolutely one of the best react YouTubeer I've ever known.
Instead of just focusing on tooling and trends, you have shown us real way to become a senior react developer.

And for some reasons I feel very proud 😉

[alisancavus]

Literally what I was looking for. I had a component that needed to pass bunch of booleans and stuff for each case. Now, I know what to do!

[BLOBBERNATOR]

The time you take to explain the design process really pays off in your videos, especially here. We appreciate it! Such a cool and useful way of using context

[ВитяДьяков-жж]

As always, you're on a super high level comparing to other teachers/mentors. Thanks for your videos, keep doing that!

[odogwu-]

One Year or watching your Design pattern video could transform one into a senior react developer, if you can do two desing pattern videos in a week I would be in love lol

[vinisoaz]

Very nice video! I've been working with React for a long time, and when I see that pattern, it opens up a lot of possibilities in my React projects. Thanks from Brazil!

[ViacheslavUstinov-gx]

Thank you, bun in my opinion, in such cases it may be comfortable to use a wrapper and pass dependent components inside with the corresponding props.

[lucaspaixao]

I use the same pattern, but instead of passing all props to PostCard, i use the "subcomponents" rendering childrens too, like <PostCard.Title>Hello, World</PostCard.Title>, because you can do more things with your component, like if you need to change the color of the title or adding an icon after the text, things like this. Anyway, excellent video! :)

[marceloviannadev]

This is extremily powerfull but, as he mention, DON'T USE IT anywhere or even worst, DON'T USE IT if u don't know what ure doing ... 6+ years of React here and toke me around 4 days to play with this methodology and understand the real need for it. It's beautiful but, requeries UX/UI experience and React maturity. Best channel by far and keep this insane work bro, ever for seniors like me, u still save us a lot a doubts here and there, 😂 🤘 cheers!!!

[SebiiAT]

Awesome work!

Keep in mind that compound components syntactically cannot be used in an RSC, eg:

<Post.Title> // will not work -> error

Therefore PostTitle must be exported individually in order to be imported like this:

<PostTitle> // will work -> no error

[mootazbellehweslati]

Great, simple and straightforward explaination as usual

[joao-pedro-alves]

You know, I'm not a React developer, actually I work with Vue but I always watch your videos because it gives me some valuable insights that I apply for Vue hahaha Another great video!

[rohitkochikkatfrancis]

Your videos is HIGH QUALITY and just absolutely SIMPLE TO UNDERSTAND !!!!

Just amazing bro.
Kindly keep with this style of teaching and don't change !!

And thank you.
For teaching me complex topics in such an easy to understand way and using examples.

May the CODE be with you 🙌

[stefangarofalo]

I literally came across a perfect use case for this at my job some days ago, but ended up using render props instead

I knew about this design pattern from shadcn components but I didn’t really know what to look for to learn more and implement it.

Thank you so much for this!

[rajukadel]

Awesome content (very rare), keep up the good work 💙

[sapperus]

You're really talented in complicated things explanation bro, keep it up! This is my favorite channel about React 👍

[thieno]

Thank you, very useful, expect you will refer more react patterns

[michaellara]

These design pattern videos are amazing!!! This is by far one of the best channels to learn how to code, everything is very concise and clear 🔥🔥🔥