Using React.VFC Instead of React.FC
- By : Mydatahack
- Category : Front-End, Web Technologies
- Tags: React, TypeScript
When we Type React functional components, it is better to use React.VoidFunctionComponent (React.VFC) instead of React.FC. React.FC always includes the children prop on your component whether you want or not. We can get around this by adding children?: never on your custom prop. However, it is much cleaner to use React.VFC and type children explicitly.
If you are using old react type, you might need to upgrade @types/react to ^16.9.53. Note that React.VFC was introduced in @types/react@16.9.48.
If you have type conflicts caused by different version dependencies in old packages, we can always add resolutions to package.json.
"resolutions": { "react": "16.13.1", "@types/react": "^16.9.53", },
See further information on React.VFC here.
UPDATE
Since the release of React 18, React.FC no longer includes implicit children and React.VFC is deprecated. We should move away from them (Moving away from React.FC and React.VFC).