Loading video...
Video Failed to Load
🔥 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

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

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

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 😅

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)

Children has been removed from FC since react 18 🥲

😅😅😅😅

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

@tscoursedotcom haha thanks Kishore! Glad you liked it 🙏

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

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

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

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

Thanks for this wonderful explaination!

Glad you enjoyed it :D

Great tip, Joe!

mega cursed

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

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

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

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

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