Most React devs don’t understand generic components

00:00 Intro
00:29 The Problem
02:01 Adding a Type Parameter
03:05 Checking What's Inferred
04:11 Adding a constraint to the type parameter
05:20 Outro

Become a TypeScript Wizard with my free beginners TypeScript Course:

Follow Matt on Twitter

Join the Discord:

[tomasburian]

Learned generics quite recently and love them. Great videos here, Matt. Subscribed for life.

[JulianColeman]

I think more impressive than the explanation of generics was how you produced that intro zoom out effect by adjusting the focal length. Amazing

[helleye]

Absolutely love generic components. It's so nice to get all the highlighting. I usually extend {id: string}, this way I can add a key for mapping based on the id, and in most cases I have id in all the objects I'm displaying anyway.

Another cool use case is a custom dropdown that takes a list of objects. Then you can also have a custom typesafe onChange. Also works great in combination with discriminated union props, if you pass 'multiple' prop your onChange is (value:T[])=>void, if you don't it's value:(T | undefined)=>void. It does get a little messy with so much functionality packed into one component (I also had a dropdown that would make a fetch call for data to populate it, which of course also was returning T[] for type safety), but I'm sure there's a way to make it more concise with some custom hooks and separate components.

[JohnBuildWebsites]

THANK YOU! Was having that exact error when spreading a field object for a form today. Will try adding Extends Record<string, any> to the type first thing tomorrow!

[sludgepuppy]

Thank you, really nice and clear and simple 👍

[krauterfrischkase]

Wouldn't it be "more react" to render the list of rows outside the Table component and then insert that into the Table children? React's philosophy emphasizes composition over configuration which would make the Table component versatile and more flexible.

[JeyPeyy]

Great video! The only change I'd make is to use unknown instead of any in TRow extends Record<string, any>

[PickleRiiiiiiick]

You're the best dude. And I follow you on everything.

[Shyam_Mahanta]

Where to buy typescript book you have behind?

[mycodingtutorials]

What font is this? What theme and what IDE?

[pavloomelianchuk]

Looks like another try for me, to understand "generics" in react.
Eventually it will come 😜
Thanks!

[pedrohenriquepires]

Wonderful content, as always! I wrote a small article on about this some time ago, inspired by your content about generics. Thank you for your amazing work!

[billyfigueroa]

Matt your videos are amazing. I have learned a lot from you

I do have a question. Is it possible to use different types for a generic component? for example, I have a carousel I want to create and I want it to be able to display different things. Like it can display an image and become a slider in a sense or it can just be a scrollable like hero section. Is it possible to have something like Carousel<Image> and Coraosel<Info> where Image and Info are objects that do not have the same attributes. Something like Image has name, urlImg and Info has header, subheader, content

[Rebel]

Hey Matt, question:

See when you hover over react component jsx call, it just references type names instead of actual types like it does when you call is a a function.

Is it possible to write a genetic type for ReactNode that solves this issue?

[QwDragon]

A very big problem with final code: using lambda fuction as a component will force recriating of everything it renders every time and will make completely impossible to keep any state anywhere inside.
One more issue: no keys are specified on rows.

[engine_man]

Dropping gems as usual. I never understood with that Intrinsic attributes thing meant.

[Clem.E]

React Table nightmare now explained, thanks!

[dmytroprokoptsov]

Hi, Matt) Your videos as beautiful as your accent! But I'm here to ask you and your community a question: is there a way in TypeScript I can check on type level whether object has keys or not? I know it is possible with Arrays, but with objects seems to be not

[hakuna_matata_hakuna]

can ytou do a video on extends, it seems like a super power

[thepetesmith]

I’m confused a bit because I always use React.FC and pass a props Type as the type arg. I don’t get how in your example you aren’t passing the type, but the generic infers the type by argument order? I’ve seen how you can pass a type argument in the jsx with angle brackets