I have been working with React + Typescript setup for a year and a half and if you are someone like me, I bet you could have seen or used Typescript interface FC
at least once. On that note, I want to share a few things related to React.FC
, which are purely out of my experience using it. Please consider this just as an opinion, nothing much and nothing less.
What is React.FC
or React.FunctionalComponent
React.FC
is a generic interface for the functional components, one of the two ways to write components in React. This is not an inbuilt type, but comes as a part of the @types/react
Below is a general way to write a component that takes children,
const CardComponentNonFC = ({
title,
children
}:{
title: string,
children: ReactNode
}) => {
return (
<div className="card">
<h1 className="card__title">{title}</h1>
<div className="card__content">
{children}
</div>
</div>
)
}
And the same code can be written with React.FC
in the following
import React, { FC } from "react";
const CardComponentFC:FC<{
title: string
}> = ({
title,
children
}) => {
return (
<div className="card">
<h1 className="card__title">{title}</h1>
<div className="card__content">
{children}
</div>
</div>
)
}
How do i use it 👍
- Cleaner code and Better DX (Developer Experience) with the default
children
prop. It makes a component container by the behaviour and less mental toll in understanding the code.
// With FC
import React, { FC } from "react";
const Card = () => {
return (
<CardComponentFC {...}> // CardComponentFC is defined above
<div> ... </div>
</CardComponentFC>
)
}
// same without FC
const CardNonFC = () => {
return (
<CardComponentNonFC
{...}
children={ <div> ... </div>} />
)
}
For me, the first code is much cleaner and easier to understand.
- Second and last reason is the return type restrictions. I'd like my component to always return an element or null (null is mostly the bottom type of my components) and I don't like undefined being returned.
React.FC
has that check, by default, to prevent returningundefined
.
import { FC } from "react";
export const Container: FC = ({ children }) => {
if (children) {
return <>{children}</>;
}
//💥 this would through the error
return undefined;
};
See the CodeSandbox for the same.
How do i NOT use it 👎
- I tried to use it for the default functional exports over the functional expressions. I had a hard time with it. Let me know if you have solved it 🙌
If a component that doesn't need to render children. It doesn't need to be typed as
React.FC
. Now that we know it implies thechildren
prop by default, useFC
only where it makes sense. Not every component need to accommodate the children.Generics in React typescript is something I like and has the flexibility.
React.FC
doesn't seem to fit well with that.
Summary
There are mixed opinions on using it and it was recently removed from the Create React App template. There are a few posts suggesting not to use it, but from experience, you may not have any huge performance implications of not using it.
There are definitely some limitations/disadvantages of using it, but I would rather say that depends on the component. Not all components need memoisation or hooks, similarly, not all components need FC
. If you can draw that thin line, you can happily use it.
** References to read more about it **
- https://github.com/facebook/create-react-app/pull/8177
- https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components
- https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33006
- https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/
- https://stackoverflow.com/questions/51459971/type-of-generic-stateless-component-react-or-extending-generic-function-interfa
originally published at here
Top comments (2)
There is another utility type for components, that should not accept childrens -
React.VFC
- that type does not extend props with children attribute.Your screenshot with
function Greeteng({ children }: FC)
error:React.FC
is alias for type that represents function, not properties object, thats why you facing error. Most common way to define type for props in such situation is to usePropsWithChildren
utility type from ReactOr if you don't need children just type props like these:
You won't loose types in JSX code.
PropsWithChildren
is TIL 🙌Thank you