Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

54,355 Aufrufe • vor 3 Jahren •via X (Twitter)

21 Kommentare

Profilbild von Pedro Figueiredo
Pedro Figueiredovor 3 Jahren

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. 👍

Profilbild von Joe Previte
Joe Previtevor 3 Jahren

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

Profilbild von Pedro Figueiredo
Pedro Figueiredovor 3 Jahren

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 😅

Profilbild von Joe Previte
Joe Previtevor 3 Jahren

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)

Profilbild von ⚡️Federico (rawnly)
⚡️Federico (rawnly)vor 3 Jahren

Children has been removed from FC since react 18 🥲

Profilbild von Joe Previte
Joe Previtevor 3 Jahren

😅😅😅😅

Profilbild von Kishore Andra (KcH)
Kishore Andra (KcH)vor 3 Jahren

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

Profilbild von Joe Previte
Joe Previtevor 3 Jahren

@tscoursedotcom haha thanks Kishore! Glad you liked it 🙏

Profilbild von Kishore Andra (KcH)
Kishore Andra (KcH)vor 3 Jahren

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

Profilbild von Jake Moreland
Jake Morelandvor 3 Jahren

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

Profilbild von Joe Previte
Joe Previtevor 3 Jahren

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

Profilbild von Ross McIntyre
Ross McIntyrevor 3 Jahren

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

Profilbild von Sujal Shah ✦
Sujal Shah ✦vor 3 Jahren

Thanks for this wonderful explaination!

Profilbild von Joe Previte
Joe Previtevor 3 Jahren

Glad you enjoyed it :D

Profilbild von Khairallah AL-Awady
Khairallah AL-Awadyvor 3 Jahren

Great tip, Joe!

Profilbild von Talha Altınel
Talha Altınelvor 3 Jahren

mega cursed

Profilbild von Peter Piekarczyk (🥧🚗🐥)
Peter Piekarczyk (🥧🚗🐥)vor 3 Jahren

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

Profilbild von Alejandro
Alejandrovor 3 Jahren

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

Profilbild von Incalapabler
Incalapablervor 3 Jahren

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

Profilbild von Joe Previte
Joe Previtevor 3 Jahren

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

Profilbild von Benny Neugebauer
Benny Neugebauervor 3 Jahren

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

Ähnliche Videos