正在加载视频...

视频加载失败

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

54,355 次观看 • 3 年前 •via X (Twitter)

21 条评论

Pedro Figueiredo 的头像
Pedro Figueiredo3 年前

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 的头像
Joe Previte3 年前

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

Pedro Figueiredo 的头像
Pedro Figueiredo3 年前

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 的头像
Joe Previte3 年前

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) 的头像
⚡️Federico (rawnly)3 年前

Children has been removed from FC since react 18 🥲

Joe Previte 的头像
Joe Previte3 年前

😅😅😅😅

Kishore Andra (KcH) 的头像
Kishore Andra (KcH)3 年前

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

Joe Previte 的头像
Joe Previte3 年前

@tscoursedotcom haha thanks Kishore! Glad you liked it 🙏

Kishore Andra (KcH) 的头像
Kishore Andra (KcH)3 年前

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

Jake Moreland 的头像
Jake Moreland3 年前

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 的头像
Joe Previte3 年前

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

Ross McIntyre 的头像
Ross McIntyre3 年前

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

Sujal Shah ✦ 的头像
Sujal Shah ✦3 年前

Thanks for this wonderful explaination!

Joe Previte 的头像
Joe Previte3 年前

Glad you enjoyed it :D

Khairallah AL-Awady 的头像
Khairallah AL-Awady3 年前

Great tip, Joe!

Talha Altınel 的头像
Talha Altınel3 年前

mega cursed

Peter Piekarczyk (🥧🚗🐥) 的头像
Peter Piekarczyk (🥧🚗🐥)3 年前

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

Alejandro 的头像
Alejandro3 年前

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

Incalapabler 的头像
Incalapabler3 年前

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

Joe Previte 的头像
Joe Previte3 年前

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

Benny Neugebauer 的头像
Benny Neugebauer3 年前

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

相关视频