Loading video...

Video Failed to Load

Go Home

🔥 TypeScript + React Tip 🔥 I've stopped using React.FC to type my Function Components. Here's why:

54,355 views • 3 years ago •via X (Twitter)

21 Comments

Pedro Figueiredo's profile picture
Pedro Figueiredo3 years ago

I was using `React.VFC<Props>` which was basically `React.FC` without the children prop, but since React v18, it doesn't have the children anymore, so, I still think that `React.FC` is a good alternative to type your components in a simple manner. 👍

Joe Previte's profile picture
Joe Previte3 years ago

might have to redo the video then 🤣 does the other downside still apply related to generic props?

Pedro Figueiredo's profile picture
Pedro Figueiredo3 years ago

Yap, that's a nice one, other than that, I'd say there is another super minor and perhaps opinionated downside for `React.FC/VFC`, which is, they also allow the old ways of defining prop types, meaning: - propTypes - defaultProps And I certainly don't want people using those 😅

Joe Previte's profile picture
Joe Previte3 years ago

Lol ahh okay. Well good to know then it still isn't the best way to type components (I also wouldn't want people to use propTypes or defaultProps)

⚡️Federico (rawnly)'s profile picture
⚡️Federico (rawnly)3 years ago

Children has been removed from FC since react 18 🥲

Joe Previte's profile picture
Joe Previte3 years ago

😅😅😅😅

Kishore Andra (KcH)'s profile picture
Kishore Andra (KcH)3 years ago

@tscoursedotcom This one is a cool video, Joe is killing with expressions 😍 ....

Joe Previte's profile picture
Joe Previte3 years ago

@tscoursedotcom haha thanks Kishore! Glad you liked it 🙏

Kishore Andra (KcH)'s profile picture
Kishore Andra (KcH)3 years ago

@tscoursedotcom absolutely Joe 💯, if it was an YT video the jump from chair reaction would be the ultimate thumbnail 😉

Jake Moreland's profile picture
Jake Moreland3 years ago

removed, i believe you can then utilise PropsWithChildren if you wish to then include the broad acceptance of children whilst still using FC

Joe Previte's profile picture
Joe Previte3 years ago

moving this to top of replies 👇 may have to make a follow up video lol

Ross McIntyre's profile picture
Ross McIntyre3 years ago

children was removed from React.FC in React 18, so that's no longer an issue.

Sujal Shah ✦'s profile picture
Sujal Shah ✦3 years ago

Thanks for this wonderful explaination!

Joe Previte's profile picture
Joe Previte3 years ago

Glad you enjoyed it :D

Khairallah AL-Awady's profile picture
Khairallah AL-Awady3 years ago

Great tip, Joe!

Talha Altınel's profile picture
Talha Altınel3 years ago

mega cursed

Peter Piekarczyk (🥧🚗🐥)'s profile picture
Peter Piekarczyk (🥧🚗🐥)3 years ago

Wow I've been doing this for months out of my lack of desire to look into how to do it correctly 😂

Alejandro's profile picture
Alejandro3 years ago

There are also some helpful utility types like Omit, Exclude, Pick

Incalapabler's profile picture
Incalapabler3 years ago

I really hate having too many exceptions. How are beginners going to learn when there’s deprecated code everywhere?

Joe Previte's profile picture
Joe Previte3 years ago

@veryfastsimba apparently it was removed in React 18 so this video may be outdated 🤣

Benny Neugebauer's profile picture
Benny Neugebauer3 years ago

Thanks for this info! Now I have to update my own React cheat sheet: 😅

Related Videos