❤️ The React Pattern I Don't Want To Miss!

In this informative and practical video, we delve into the fascinating world of React compound component pattern and explore how it can dramatically enhance the cleanliness and maintainability of your code. As developers, we strive to write clean, modular, and reusable code, and the compound component pattern provides an elegant solution to achieve just that in your React projects.
Throughout the video, we'll demystify the concept of compound components and demonstrate step-by-step how to implement them effectively. You'll gain a deep understanding of how compound components work together, allowing you to create highly customizable and flexible UI components in React. By leveraging this powerful pattern, you'll be able to build complex user interfaces while keeping your codebase organized and easy to understand.
------------------------------------------------------------------------------------
GitHub Repo(Don't forget to give it a star): github.com/vah...
#React.js #nextjs #CleanCode

[@JairoPy]

Arrow functions are not hoisted, so you cannot use them before initialization, that's why you used regular functions

[@augustopruvost7316]

insightful, thank you

[@SakuraDev]

@augustopruvost7316 Thank you so much 🙏.

[@SimPwear84]

Beautifully explained!! Enjoyed this video a lot and just subscribbed.
Can you please make more videos on React design patterns? You do it very well, thanks.

[@SakuraDev]

Thanks, 😊🌹, really happy you enjoyed it. Yes I put it on my list.

[@giovannitonussi3746]

Thanks for the video man, really helped me to accomplish this pattern.

[@SakuraDev]

Welcome to the channel🖐🏻, Glad it helped!

[@alirezak5870]

we used primitive functions because we can't call arrow functions before initialization?

[@SakuraDev]

Thats true. mamnoon

[@0xtz_]

i tried this in next.js 13 idk it dosdent work hh mainly it was types error, now gonna try this and thanks man u always saving my life hhh

[@SakuraDev]

Glad you found my videos useful.

[@giovannitonussi3746]

Hello friend, I also had some Typescript errors to create a Compound Table. What saved me was to change all typing to the amazing ComponentProps, imported from React. You just have to pass the Html tag like this: ComponentProps. Worked like a charm. Hope it helps.

[@einfacherkerl3279]

i have a question. if i want to have a generic component, let's say a grid. and the generic argument is the data that is passed to the grid which off course is a list of rows with each row having same columns. i want the child component, a grid column to bind to a particular column of the data. how is it possible?

[@SakuraDev]

Yes it is possible. here is an example: github.com/vahid-nejad/medical-evaluator-tooth/blob/main/src/components/elements/DataTable.tsx

[@xiiEJRAM]

Great explanation 👏🏻👏🏻

[@SakuraDev]

Thanks, I hope it was helpful for you 🌷

[@raphauy]

Awesome 👏👏👏

[@SakuraDev]

Thanks for your nice response 🙏🙏

[@ThugLifeModafocah]

because of temporal dead zone. Arrows functions are a bad idea when you want to avoid it.

[@Pareshbpatel]

The compound-component React Pattern, so clearly explained. Thank you.
{2024-06-10}

[@mediacreatif]

Thanks but I don't understand why the second method is a better practice, it looks more difficult and complex....

[@SakuraDev]

Hi. It move the complexity inside the component. you define the complex code once and use it multiple time.

[@liu-river]

It's basically a reusable component, you can do the same by using the first pattern and just pass in the content as arguments. But then you can't really read the component and it's content until you open up the component file, this shows you exactly what the component contains. It's up to you how you wanna do it, each to their own.

[@SakuraDev]

@@liu-river thanks for your nice explanation

[@Edwinil]

Hi, is there a different between composition component(ruclips.net/video/vPRdY87_SH0/видео.html) and compound component? Can we use context API in both? The main function CompoundCard can share props with anothers children functions?
Thanks for the video.

[@Edwinil]

Btw, your method looks more organic than the other video.

[@SakuraDev]

Hi, It's slightly different. in compound pattern the children a CARD are specific to the parent and can't be used outside of the parent

[@popuguytheparrot_]

its bad pattern lol
tree shaking leave from chat

[@galactusclb5733]

Reason?

[@popuguytheparrot_]

@@galactusclb5733 bundlers cant optimize unused namespace import from dot

[@KarimShalapy]

I was just going to comment something similar, now whenever you import the CompoundCard all of its parts are imported with it and it's not shakeable even if you didn't use these parts.
It could be enhanced by simply exporting all the parts without making it compound but then this would be a children-first component not a compound component.
I am not sure if I am right or wrong, but this feels wrong.

[@popuguytheparrot_]

clowns