Compound Components in React (Design Patterns)

Рет қаралды 27,547

15 күн бұрын

🚀 Project React → cosden.solutions/project-react
Join The Discord! → discord.cosden.solutions
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.

Пікірлер: 97

@ariyoujahan9662 12 күн бұрын

18:07 این نیز بگذرد. 😊 You are absolutely one of the best react KZfaqer 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 😉

@SebiiAT 3 күн бұрын

Awesome work! Keep in mind that compound components syntactically cannot be used in an RSC, eg: // will not work -> error Therefore PostTitle must be exported individually in order to be imported like this: // will work -> no error

@alisancavus3483 13 күн бұрын

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!

@user-td9ji1mm1r 14 күн бұрын

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

@rjwhite4424 13 күн бұрын

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!

@michaellara695 13 күн бұрын

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 🔥🔥🔥

@daniguitar2012 14 күн бұрын

Love this kind of videos and the way you explain the step by step process, keep it up!

@moot6794 14 күн бұрын

Love it. Great explanation. Thanks.

@odogwu-1918 13 күн бұрын

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

@ivan4486 13 күн бұрын

OMG this is so cool! I urgently need to apply it somewhere!

@vijaytembugade 14 күн бұрын

Amazing video! Thank you so much

@stefangarofalo3131 5 күн бұрын

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!

@chinmayghule8272 14 күн бұрын

This is by far the best explanation of compound components I've seen so far. I wanted to learn it since a while ago but all resources that I read or watched were too complicated for me to understand. Great work! BTW, can you please create a few videos to show how testing is done in React? I'm referring to complex use cases where you'd need to test custom hooks, contexts, or hooks which fetch data so you have to mock API for them.

@alwazkazi1916 14 күн бұрын

Love this!!! Thanks for this usefull info

@rohitdalal954 3 күн бұрын

thank you so much for this. your content is really really good. Learning a lot. Thank you 🙌

@fahedsmadi2982 14 күн бұрын

Love your videos, very informing

@rohitkochikkatfrancis 13 күн бұрын

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 🙌

@cosdensolutions 13 күн бұрын

thank you for the kind words!

@marceloviannadev 14 күн бұрын

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!!!

@isaacjon 14 күн бұрын

Is it possible to let us know what is your salary as a react developer with 6+ experience? Do you struggle to find a job or not in these days?

@marceloviannadev 14 күн бұрын

@@isaacjon Shure, everything is relative and depends and salary's for a more senior role can start around 4K USD/month and flyes higher, again, very depends... Keep one thing in mind, seniority's is much more about maturity and exp than code itself alright? I have 15+ in development/design specialized in frontend so, u will never know every syntax or 100% of something but, if u have the business mind and understatement on how a software works and it's layers and business flow, you will be ahead of millions. Struggle? Linkedin recruiters reach me at least 2 times per week offering something so, if u have maturity + exp + prove in a interview what u are capable of, u more than fine to proceed and keep trying but, keep in mind that, is annoying get hired cause u will fight for the role with a lot of people. It doesn't mean that u no good enough, it's just the reality of life, everything happens in gods time, not ours, cheers bro I hope it helps! 🤘

@marceloviannadev 14 күн бұрын

@@isaacjon "Hey, I wrote you a reply, but I think the KZfaq algorithm didn't like it. So here's another one. I'm not talking about money because this is highly relative to the role and your level. One thing I can say for sure is that development is much more about maturity and experience rather than just technical knowledge. You must understand very well how the layers of a software work in order to develop a sense and experience inside you where you just know stuff, and even when you don't, you have an idea of what you have to do in different scenarios." I hope it helps, cheers! 🤘

@hakanberat 9 күн бұрын

Hey @marceloviannadev , can you give examples of usecases where we should not use this pattern?

@marceloviannadev 8 күн бұрын

@@hakanberat Sure bro, it's very simple and u will never forget... Use Case for CC: Employ compound components when you need a versatile UI element that is used repeatedly across your app but requires adaptability based on the context or data it receives. For example, a notification component that needs to conform to a UI design pattern while also varying in presentation-such as with or without buttons, icons, or read status-based on different scenarios. When Not to Use: Avoid using compound components for static UI elements that do not vary and are used consistently throughout the app, such as a navigation top bar. These elements do not benefit from the adaptability that compound components provide. Note on Figma and Frontend: It's important to distinguish between component usage in Figma and frontend development. In Figma, designing various scenarios for a component is common, but not every design needs to be implemented as a compound component in the frontend. The decision should be based on the specific needs and rules of your project. I hope this streamlined explanation is helpful! 🤘

@shakhzod__n 13 күн бұрын

Useful content! Thank you bro

@carloseduardomagalhaespere5112 14 күн бұрын

Excelent video as usual! This pattern is similar to the Composition Pattern, which is also quite interesting. Thanks =)

@abhisekpaul 8 күн бұрын

That's amazing 🔥

@Assassin29 8 күн бұрын

This looks good ❤

@gershymenzer6268 14 күн бұрын

Extremely powerful 👍

@mohhamadtoosi8128 8 күн бұрын

I love this tutorial🔥.

@estebanbocardomedel 11 күн бұрын

And it gets even more interesting when the subcomponents modify the main component state to change other subcomponent's behavior!

@cloynelson2974 13 күн бұрын

ahaha, I finally know how this is called :D Thanks, great vids, do more of them pls!

@joao-pedro-alves 13 күн бұрын

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!

@fogguy3838 7 күн бұрын

amazing video

@ashish_prajapati_tr 14 күн бұрын

this is awesome

@lucaspaixao8107 12 күн бұрын

I use the same pattern, but instead of passing all props to PostCard, i use the "subcomponents" rendering childrens too, like Hello, World, 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! :)

@sivaganesh4489 10 күн бұрын

Yes

@Fuzbo_ 9 күн бұрын

Generally prefer this pattern to avoid needing to keep adjusting components to expose additional options when requirements change. However, I usually prefer to just provide the relevant props to the inner components instead of using a context provider. This also allows you to use RSC instead of client components for these components

@prakashsanyasi5608 14 күн бұрын

Thank you ❤

@toastyy1455 5 күн бұрын

Great idea! Thanks for the tutorial on this. I'm definitely guilty of adding a quick boolean prop to change some things around every now and then lol. 1 unrelated question though, any reason you're using types instead of interfaces? Are there any drawbacks? I've usually used types just for quick string types like: type Status = 'open' | 'cancelled' | 'complete'; Great content though, i wasn't subscribed before but i am now! Thanks man!

@killswitch. 14 күн бұрын

Compound Components are just too OP

@ThangNgo-hs2oy 13 күн бұрын

Good video, good têchrvideo, good teacher

@Corvurax1 14 күн бұрын

This could be useful for layouts where you use sections differently, such as aside sections, main scrollable sections with posts loading on either a homepage or a profile page and such. Very cool!

@bramdenelzen4070 14 күн бұрын

i always wondered how ui libraries did this, thanks!

@ShyamTala-wh2pe 12 күн бұрын

it's amazing.

@raphauy 13 күн бұрын

Thank you

@hustler2693 14 күн бұрын

Wow exceelent

@Alex.Shalda 3 күн бұрын

awesome

@mooder3247 13 күн бұрын

More pls on this topic

@geforcesong 13 күн бұрын

great! however, i believe to keep consistence, you'd better not use this pattern unless it's really necessary.

@angletheeta 14 күн бұрын

I have a question if we use nextjs, usecontext when the place we use, we have to make it as a client component how to get rid of them because most of the time the data fetch from a db so it a server component

@keifer7813 14 күн бұрын

I would love to see you make a video completing a project from start to finish to see your process and learn from you

@cosdensolutions 14 күн бұрын

that's exactly what is project react :D

@keifer7813 12 күн бұрын

@@cosdensolutions Oh. I'm broke as hell unfortunately

@arijitRoyFullyStressedOut 14 күн бұрын

thanks

@JeremyMapalad 13 күн бұрын

I hope you do Next.js videos as well

@vinitgupta1648 13 күн бұрын

Another Great video!! Thanks for this, but I would like to know from where do you get these information? Like where did you come across Compound Components is a Design Pattern in react?

@cosdensolutions 13 күн бұрын

nowhere specific, but heard about it from multiple places online over the years, and eventually started to use it and really liked it for specific use cases

@sinamalakzadeh4843 6 күн бұрын

please create a video about rtk query as well

@imatrules 11 күн бұрын

sorry i'm new, while learning i would use interface but now i'm seeing type is it the same ? If not what's the difference?

@harshbhardwaj6060 13 күн бұрын

One example that comes to my mind is pagination component as it have many variants bases on location its used: - with previous next button and numbers - with just numbers - with dots only - with dots + any thoughts?

@UkashaHacksCommunity 14 күн бұрын

2nd commenter. thanks cosden. i appreciate

@thaiducquang2318 6 күн бұрын

I have a question related to React.memo. If I use React.memo for the PostCard component, will it affect compound components?

@Tibbersftw 12 күн бұрын

I’m fan of the compound components because they give you more flexibility in different scenarios. I’m not completely sold on passing post as a prop and sharing with the others via context. In my opinion instead of passing post as a prop and getting the child components to render the title and instead just get them to render children. This way the consumer will have more control and no need to use context.

@jasonvictor1798 12 күн бұрын

I had a similar thought too. For simpler compound components I could see the provider working well but more complex ones with subcomponents handling many props the render children would be better

@miloman1995s 2 күн бұрын

video starts at 01:07

@danicmaxime9003 10 күн бұрын

That's such a cool solution! However, let's say I'm on the same page and I want to render the same component x times. The component is rendered using the map() method because it fetches data. For exemple I need my component to display titles for the first two instances, but not for the third. How would you approach this using compound components ?

@cosdensolutions 10 күн бұрын

Just use the same pattern, and use the index to conditionally render the component.Title

@gamingwolf3385 13 күн бұрын

Hello cosden , do you trust me , i was trying to do something like this , this morning Thank you my freind For next video , maybe Framer motion or some popular web motions using framer motion I don't know if i don,t have creativity or isf-motion hard to me ! 😅

@MrZiyak99 9 күн бұрын

this would mean that the post component can no longer be a server component and has to be a client component?

@HBMoulvad 14 күн бұрын

Aren't this gonna make all the components client components, since they are using context to get the post data? If you instead of using context, just parsed the post as props to the new components, this would get rid of having them all becone client components - right? But I like the general take on this

@mahmoudabusultan6668 13 күн бұрын

or just passing the content as children, for ex: {post.content}

@blyatMail 13 күн бұрын

sir do you upload your courses in udemy?

@ManishKumarYadav-oc5fg 9 күн бұрын

This patterns is not useful in case of Server side rendering. @Cosden Solutions how we can solve this for SSR.

@snatvb 13 күн бұрын

one more thing: it would be rather to have passing rest props of html element and merge classNames to have able to update in from outside. You need care about performance, {{ spot }} - will update context value and re-render every component that use it and with post prop in parent same. I thing you did't have purpose to focus on it. Just a lot of people don't really understand how they make them apps slow after look videos. I had such people on my work and they as proof used arguments - look, on this video this guy don't use memoization and smt like that))

@PeterSahanaya 12 күн бұрын

react 19 be like : Are sure about that broda?

@snatvb 12 күн бұрын

@@PeterSahanaya react 19 dont give you nothing for solve this, it will do react compiler :) and still you need to understand how it works and how write code correctly) but yes, most of that wont be necessary

@PeterSahanaya 11 күн бұрын

@@snatvb yeaa, you're right, we still need to know what happen under the hood

@chetangarg9642 13 күн бұрын

how its different then just creating atomic components and building them at call site . you just have use context to reduce params, rest code is same.

@nanakwekuotoo1775 8 күн бұрын

Can this be used in react native

@cosdensolutions 8 күн бұрын

Yes

@aniskehila8905 13 күн бұрын

@kantyDarius 14 күн бұрын

I've to be honest.. I've been working with for more than 3 years and I have never use comp. Compns😞

@rakulagn4598 14 күн бұрын

It's crucial to think about how the component will manage various data types and adapt to dynamic content.

@joseflinha 9 күн бұрын

I don't really like this design pattern, you pass all the data (post) to the PostCard, but not always all the data needs to be used - depending on the use of the subcomponents. In addition, if I want to use such a component in several places, I have to list subcomponents everywhere - if I want to avoid this, I can create a packaging component, but I find it undesirable, while it would be enough to create a component, for example SimplePostCard, where I pass only the necessary data, which component actually needs and I will meet its interface.

@sivaganesh4489 10 күн бұрын

I use children pattern instead of this

@FatahChan 14 күн бұрын

In NextJS I would not recommend using context, unless your sub-components interact with each other, so you can take advantage of server components for example, the title subcomponent you can ada the content as children like so {post.title}

@cosdensolutions 14 күн бұрын

yeah that's a very good point!

@lord_kh4n 14 күн бұрын

True, don't need a context at all.

@tangaka3996 13 күн бұрын

+1, context is not necessary at all if you just put children props in every sup components, it retains the deaign pattern and matches at the same time your component is also rendered in server

@inayatcassambai469 13 күн бұрын

But then how would you stop the component being rendered outside it's parent component without the having the context hook throwing an error?

@303pix 13 күн бұрын

@@cosdensolutions it's good for abstraction have not a context but how to prevent use of subComps outside?