Thanks all for the answers. They are correct but I was looking for a more detailed version. I did some more research and found this on React+TypeScript Cheatsheets on GitHub.
Function Components
These can be written as normal functions that take a props argument and return a JSX element.
type AppProps = { message: string }; /* could also use interface */
const App = ({ message }: AppProps) => <div>{message}</div>;
What about React.FC/React.FunctionComponent?
You can also write components with React.FunctionComponent (or the shorthand React.FC):
const App: React.FC<{ message: string }> = ({ message }) => (
<div>{message}</div>
);
Some differences from the "normal function" version:
It provides typechecking and autocomplete for static properties like displayName, propTypes, and defaultProps - However, there are currently known issues using defaultProps with React.FunctionComponent. See this issue for details - scroll down to our defaultProps section for typing recommendations there.
It provides an implicit definition of children (see below) - however there are some issues with the implicit children type (e.g. DefinitelyTyped#33006), and it might be considered a better style to be explicit about components that consume children, anyway.
const Title: React.FunctionComponent<{ title: string }> = ({
children,
title
}) => <div title={title}>{children}</div>;
In the future, it may automatically mark props as readonly, though that's a moot point if the props object is destructured in the parameter list.
React.FunctionComponent is explicit about the return type, while the normal function version is implicit (or else needs additional annotation).
Answer from Kuldeep Bora on Stack OverflowIn most cases, it makes very little difference which syntax is used, but the
React.FCsyntax is slightly more verbose without providing clear advantage, so precedence was given to the "normal function" syntax.
Thanks all for the answers. They are correct but I was looking for a more detailed version. I did some more research and found this on React+TypeScript Cheatsheets on GitHub.
Function Components
These can be written as normal functions that take a props argument and return a JSX element.
type AppProps = { message: string }; /* could also use interface */
const App = ({ message }: AppProps) => <div>{message}</div>;
What about React.FC/React.FunctionComponent?
You can also write components with React.FunctionComponent (or the shorthand React.FC):
const App: React.FC<{ message: string }> = ({ message }) => (
<div>{message}</div>
);
Some differences from the "normal function" version:
It provides typechecking and autocomplete for static properties like displayName, propTypes, and defaultProps - However, there are currently known issues using defaultProps with React.FunctionComponent. See this issue for details - scroll down to our defaultProps section for typing recommendations there.
It provides an implicit definition of children (see below) - however there are some issues with the implicit children type (e.g. DefinitelyTyped#33006), and it might be considered a better style to be explicit about components that consume children, anyway.
const Title: React.FunctionComponent<{ title: string }> = ({
children,
title
}) => <div title={title}>{children}</div>;
In the future, it may automatically mark props as readonly, though that's a moot point if the props object is destructured in the parameter list.
React.FunctionComponent is explicit about the return type, while the normal function version is implicit (or else needs additional annotation).
In most cases, it makes very little difference which syntax is used, but the
React.FCsyntax is slightly more verbose without providing clear advantage, so precedence was given to the "normal function" syntax.
React.FC is not the preferable way to type a React component, here's a link.
I personally use this type:
const Component1 = ({ prop1, prop2 }): JSX.Element => { /*...*/ }
Short list of React.FC cons:
- Provides an implicit definition of children, even if your component doesn't need to have children. That might cause an error.
- Doesn't support generics.
- Doesn't work correctly with
defaultProps.
React.FC vs React.FunctionComponent
Should we use React.FC to provide type for Components?
What's the difference between a React.FunctionComponent and a plain JS function component?
React.FC vs JSX.Element
Videos
I see lots of posts and articles suggesting that using React.FC is for beginners and mostly not recommended I am working in nextjs project with typescript and all my seniors has created interface at the top of the file and used React.FC. Yesterday I had interview and he asked he what does React.FC does and what can be used in it's place. I see React.FC getting used everywhere and also in YouTube tutorials and even in our projects. So what is the recommended way and what developers with experience use?
I have seen people use React.FC to wrap typed props as it includes children prop. What are the pros and cons of using it?
There is no difference under the hood. The first one is using TypeScript syntax to indicate the type of React.FunctionComponent but they are both plain JS function components.
there are some minor differences, plain function component could return string, like:
const FooString = () => "foo";
but you couldn't return string from a FunctionComponent.
const BarString: React.FC<{}> = () => "string";
hence the return type must be ReactElement|null