Learn React Generic Components In 6 Minutes

Generics are one of the most important skills you can learn as a TypeScript developer, but this is also equally as true for React developers. In this video I will explain how React generic components work and show you why this is something you need to know how to write.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:47 - When You Need Generics
02:45 - How To Create A Generic Component

#TypeScript #WDS #ReactJS

[AcromondX]

I will freak out the day Kyle stops shaking his head while speaking.

Good stuff BTW!

[omega.developer]

Bravo, I learned an advanced topic today. That makes my day. Thanks Kyle bro..🎉

[lifeofcode]

I do this often lately, its made my code so much more reusable. instead of having strict types for components.

[JarheadCrayonEater]

From a SSE, please use the convention of "T" before the generic type specifiers. It removes conflicts with other type names and also can be carried over to other languages, since it's widely used.

[latanoel]

I've been using this approach for a while. But for rare cases where components are reused for different source data types. Nice one Kyle.

[vetrivendhan]

Finally someone speaks my point. I really feel happy here. ❤

[MrJettann]

It's cool, Kyle! Want to see more advanced tricks and tips in react! But where to use such components? Usually lists contains not only primitive values, but other components and more difficult structure in general?

[chaunceyphilpot]

As some others have stated, please use T as a generic type. It's the universal symbol for it.
If you put something like "GenericListType" I'm going to assume that's a real type somewhere.

[Monstermash]

Not a fan of <Component<Type> /> at all, there are almost no cases where you need to do this, <Component /> should have an extended generic instead, or just <T, >

[SeanAlunni]

I thought you were clickbaiting with that syntax, It's crazy that you can do that!

[Dameng-nbwc]

Just found the solution:

<>
{data.map((d) => (
<div
))}
</>

would treat JSX.Element as a single element which can avoid the error of Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, key.

thanks kyle ~

[rohitpraks]

I’ve always been curious, how much money do you make a year?

[geforcesong]

How this generic type can work with React.FC? I prefer this way to define the component, but didn't find a way of adding generic. e.g. below is not a valid syntax.
export const Editor<ItemType>: React.FC<Props<ItemType>> = ({ runId }) => {

[nicobost]

if you squint your eyes, you can see that Kyle from 5 years ago traveled forward in time and made this video, that's why he hasn't aged a single minute

[hbgbznn]

If this seems weird, please check his other video on generics. It might help you.

[mahoneg]

As an old C++ programmer, I like T from C++ templates. Hmmm I wonder if that is where the T comes from. By the way, Kyle helped me understand React and JS a lot.

[KhaledGhallabPro]

My beautiful friend.. I have a problem in one of my files in React because of this wonderful lesson I thought that maybe you have a solution for it.. But I do not know how to send you the file to review it and maybe the problem will be solved. Once again I really appreciate what you do for developers. Thank you

[ValentinJasonGaje]

Can we have more tutorial about Typescript in NextJs or React :)

[viet.khoaiegg]

Thanks a lot, now I can get rid any haha

[evalaviniabucur]

I'm just curious who Sally is :))