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.FC syntax is slightly more verbose without providing clear advantage, so precedence was given to the "normal function" syntax.

Answer from Kuldeep Bora on Stack Overflow
Top answer
1 of 5
217

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.FC syntax is slightly more verbose without providing clear advantage, so precedence was given to the "normal function" syntax.

2 of 5
93

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:

  1. Provides an implicit definition of children, even if your component doesn't need to have children. That might cause an error.
  2. Doesn't support generics.
  3. Doesn't work correctly with defaultProps.
🌐
DEV Community
dev.to › elhamnajeebullah › react-typescript-what-is-reactfc-and-why-should-i-use-it-4029
React & TypeScript: What is React.FC and Why should i use it? - DEV Community
January 9, 2023 - You can also use React.FC when you want to specify a defaultProps object for your function component. For example:
🌐
Harrymt
harrymt.com › blog › 2020 › 05 › 20 › react-typescript-react-fc.html
Should you use React.FC for typing React Components · Harry's Blog
May 20, 2020 - With React.FC I can put children under my component and they won’t render but will be typed correctly.
🌐
DEV Community
dev.to › xenoxdev › usage-of-reactfc-from-my-experience-22n7
Usage of `React.FC` from my experience - DEV Community
February 13, 2022 - 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 returning undefined.
🌐
W3Schools
w3schools.io › learn › react-typescript-functional-components
The Ultimate Guide to Building Functional Components in React Typescript - w3schools
import React, { FC } from 'react'; interface MessageProps { message: string; } function FunctionalComponent(props:MessageProps){ return ( <> <h1>Welcome {props.message}</h1> </> ); }; export default FunctionalComponent;
🌐
Medium
medium.com › @bobjunior542 › effortlessly-use-react-fc-with-typescript-best-practices-91aa7fc057c7
Effortlessly Use React FC with TypeScript: Best Practices | by Bob Junior | Medium
April 26, 2023 - Import React and declare FC type ... import React and declare the FC type. We can do this with the following code: ... Declare Props interface Next, we need to declare an interface for the props that our FC will receive. This interface will define the shape of the props and their types. For example...
Find elsewhere
🌐
Medium
benhur-martins.medium.com › typing-react-components-react-fc-or-jsx-element-f3972d4000da
Typing React Components: React.FC or JSX.Element? | by Ben Hur | Medium
August 10, 2022 - Probably the most common is using the interface already provided by react: FC, which means Functional Component, if the component accept props we only need to add the prop types on it: FC<MyProps>.
🌐
GitHub
github.com › payloadcms › payload › discussions › 7513
Do not use React.FC · payloadcms/payload · Discussion #7513
Payload source code, examples and documentation use React.FC (and/or friends: React.FunctionComponent, React.FunctionalComponent) Instead of writing: const MyComponent: React.FC = ({ hello }...
Author   payloadcms
🌐
Echobind
echobind.com › post › react-with-typescript-components-as-function-declarations-vs-function-expressions
TypeScript: Function Declarations vs. Function Expressions
December 13, 2019 - When your components accept props, it’s important to know where those get added in as well. Here’s an example: type Props = { name: string; } const MyComponent: React.FC<Props> = ({ name}) => <h1>Hello, {name}!</h1>
🌐
Total TypeScript
totaltypescript.com › you-can-stop-hating-react-fc
Since TypeScript 5.1, React.FC is now "fine" | Total TypeScript
August 16, 2024 - React.FC is now perfectly fine to use in TypeScript 5.1 and React 18. It no longer implicitly includes children and accepts more return types.
🌐
LinkedIn
linkedin.com › pulse › what-reactfc-while-using-ts-reactjs-samiran-roy-61sqc
What is React.FC while using TS with React.js??
January 25, 2024 - When you see React.FC, it's typically used as a generic type with the angle brackets <...> to specify the type of props that the functional component receives. For example:
🌐
JavaScript in Plain English
javascript.plainenglish.io › react-fc-in-typescript-should-you-use-react-functional-components-af4295d87d80
React.FC in TypeScript: Should You Use React Functional Components? | by Rakesh Kumar | JavaScript in Plain English
May 19, 2025 - import React from 'react'; interface ... } const MyComponent: React.FC<MyComponentProps> = ({ title, description }) => { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> ); }; export default MyComponent; ... New JavaScript ...
🌐
StackBlitz
stackblitz.com › edit › react-fc-sample
React Fc Sample - StackBlitz
Starter project for React apps that exports to the create-react-app CLI.
🌐
Medium
medium.com › raccoons-group › why-you-probably-shouldnt-use-react-fc-to-type-your-react-components-37ca1243dd13
Why you probably shouldn’t use React.FC to type your React components | by Sam Hendrickx | Raccoons Group | Medium
October 19, 2021 - React.FC or React.FunctionComponent provides an implicit definition of children. This means that when you type your component with React.FC, the component automatically accepts children provided to your component. The component in the example above can be used like this:
🌐
Chanchan's blog
chanchann.github.io › blog › journal › 2025 › 03 › 31 › react-fc.html
React 02 : Understanding React.FC
March 31, 2025 - The children property: React.FC automatically includes children in the props type, even if you don’t explicitly declare it. This is because React components typically can accept child nodes. Example:
🌐
Fettblog
fettblog.eu › typescript-react-why-i-dont-use-react-fc
TypeScript + React: Why I don't use React.FC
August 30, 2020 - This is also an argument Martin makes in his original article. Typing with React.FC<> opens your components for children. For example:
🌐
CodeSandbox
codesandbox.io › examples › package › react-fc
react-fc examples - CodeSandbox
Use this online react-fc playground to view and fork react-fc example apps and templates on CodeSandbox.