Moving away from React.FC and React.VFC
- By : Mydatahack
- Category : Front-End, Web Technologies
- Tags: Front End, React, TypeScript
Since the release of React 18, VFC has been deprecated. FunctionalComponent (FC) does not have implicit children any more.
See this pull request. It states:
Since the release of the React 18 types we haven’t seen any use case for FunctionComponent with implicit children beyond "it breaks existing stuff".
As React evolves, using VFC instead of FC is no longer relevant.
Now that we think about it, using FC or VFC was not a good idea from the beginning. Typing the argument instead of typing the function itself is more future-proof because the type of function can change in the React API as it happened for the React 18 update.
We really should be typing the argument for the react component. This means instead of typing the function.
const MyComponent: React.VFC= ({ prop1, prop2, prop3, }) => ( ... )
We should be typing the argument.
const MyComponent = ({
prop1,
prop2,
prop3,
children,
}: MyComponentProps) => (
...
)
