❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics and 70+ video tutorials just like this one. Check them out ↓

This is a really bad example of composition. You kind of allow the user to make a mistake like adding the icon in between the other components. If you want something similar you have to use renderProps.

I call that flexibility

Meh. Yes use composition but this example Implementation isn’t that much better. It’s why we don’t have div and div.p and div.h1

This allows too much configurability. It’s better to use the interface of the component to guarantee the user won’t abuse how the component works internally. (“children: ReactNode” is basically an any)

Bad example of composition tbh

Composition is good for an unopinionated component library where expectation is that devs will add custom styles. But it's a no-go for a product/brand's design system because they have rules set in stone for the sake of consistency Eg: "alert icon will always be on the top-left"

Isn’t exporting as sub elements on the parent bad practice? Due to tree shaking limitations?

For me this does not make sense as I would have to change all the Alerts in my codebase if I want to change the Alert itself. If I wrap this in it's own component, I would have to pass all the props to the wrapper component.

Love using this tip especially for the performance benefits