Compound Components are SUPER intuitive

#shorts

Become a TypeScript Wizard with my free beginners TypeScript Course:

Follow Matt on Twitter

Join the Discord:

[stevecastaneda]

Can you make a video on using compound components and forwardRef together?

[joseandkris]

Why are you calling us Wizards? Can you call us Barbarians sometimes? Not all of us coders like spell casting, some of us like melee :)

[codebycarlos]

Setting function properties can be pretty useful in some situations. Say you want to store some metadata or use a callback function differently based on a property.

In this case though I don't really see the benefit. Wouldn't it be better to just define/import those components separately? Looser coupling and better for treeshaking I'd imagine..

[Fingolfin]

hey man, thank you for these short videos. I love to start my day learning some random unknown thing from typescript that I can easily try on my work (unknown for me at least)

[yavuz]

why exactly is <Form.Input> superior to just using <Input> inside <Form>?

[clementcreusat]

Hi Matt! What about compound with forwardRef? A quick video maybe please? 😊

[yadusolparterre]

Why would you do that though? What problem does it solve?

[MauroGabrielTitimoli]

You can also use Object.assign(Form, {Input})

[umargulzar]

You are so good man ❤❤❤ Awasome tutorial..

[baka_baca]

I've seen this pattern before and it's very lovely to use. Would love to have this pattern available in other frameworks/libraries too

[mickaelmarques]

Hey Matt, what would be even more interesting with compound components is to restrict the type of child component. In this example the `Form` component can only contain `Form.Input` components

[Meuhandle]

I’ve seen this used for react-bootstrap, nice trick

[DaminGamerMC]

But why would I want a compound component?

[Meuhandle]

Nice post matt, although I think the text is a wee bit small.

[stopster]

Apart from the semantics, what use cases for it you see, Matt?

[vikingthedude]

So is this possible because Typescript performs type-narrowing after every assignment statement?

[sc]

I've not seen this pattern used in react in years lol

[DioArsya]

thit is only setting a property on function object, not specific to typescript feature, it is purely javascript magic, right?

[nazarshvets]

Hmm, i used to use
```
const Form = Object.assign(() => ..., { Input })
```

[re.liable]

Personally would've just named it FormInput to show association. But there might be some better use cases for it that Idk about