DEV Community

Cover image for Compound components - React

Compound components - React

Sune Seifert on July 13, 2021

What are compound components? Compound components are just a set of components that belong to each other and work great together. They a...
Collapse
 
adejolx profile image
adejolx

Your method of teaching this concept is invaluable, thank you.

Would this be practical for a reusable table that utilizes variable props depending on the sort of data to be displayed?

Thanks once again.

Collapse
 
brunolucena profile image
Bruno A Lucena

Great article man, it really helped me understanding this pattern better than the other articles.
Really well explained step by step.

Collapse
 
bqardi profile image
Sune Seifert

Thank you so much, and you are very welcome. I appreciate your kind feedback...

Collapse
 
ymoran00 profile image
Yoav

Best article on this subject I've read. Thanks!
Btw - do youu hace a codepen or github with the complete code result of this tutorial? It would be great to see how everything fits at the end.

Collapse
 
bqardi profile image
Sune Seifert

So, had to make time to create a sandbox and I have now (finally) added a code sandbox to the article...
Cheers...

Collapse
 
bqardi profile image
Sune Seifert

Thank you for your positive comment.
Since I just thought up the code in my mind while I wrote this article, I really haven't got any example code online anywhere. But I thought it would be a great addition to be able to show some completed code, and therefore I extended the article with some complete, working, example-code. Thank's for the (indirect) suggestion :)

Collapse
 
trejocode profile image
Sergio A. Trejo

Thanks a lot man.

I share the code:

codesandbox.io/s/react-compound-co...

Collapse
 
gohulutech profile image
gohulutech

Dude, great article. Pretty simple for when you are just getting familiar with useMemo and useCallback. Thanks.

Collapse
 
bqardi profile image
Sune Seifert

You're very welcome. Thanks for the comment...

Collapse
 
manolyatam profile image
ManolyaTamimi

Good job explaining it!
Just understood it

Collapse
 
wuarmin profile image
Armin

Do I really need useCallback or useMemo, or do I need them only if I have performance issues?

Collapse
 
bqardi profile image
Sune Seifert

useCallback and useMemo are not required to implement this pattern. They can surely be used in this pattern like all other hooks, including custom hooks. Basically the only requirement for you to use the compound component pattern is a slight shift in thinking (and understanding it off course).

Collapse
 
yaswanth292999 profile image
yaswanth292999

This has to be the best explanation across whole internet

Collapse
 
bqardi profile image
Sune Seifert

Wow, thanks. I really appreciate your comment :-)

Collapse
 
hambone01 profile image
Hoboseph Joseph

Really well done. You did a great job teaching this. Thank you!

Collapse
 
bqardi profile image
Sune Seifert

I'm glad you liked it and thank you very much for your positive comment. :-)

Collapse
 
twanttobealighi profile image
Daria Moreno-Gogoleva

Interesting approach. Thank you for sharing this.