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 - The component is defined using the React.FC type, which allows TypeScript to check that the component is being used correctly and provides type information for the component's props.
Discussions

Is React.FC not recommended? what are other alternative and recommended way?
React.FC is unnecessary. Doubly so now that the React 18 types no longer automatically include childrenas a prop. The simplest approach is: interface MyComponentProps { name: string; // whatever else here } function MyComponent({name}: MyComponentProps) { // rendering logic here } See https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/ for a more extensive section explaining why React.FC should mostly be avoided. More on reddit.com
🌐 r/reactjs
37
36
August 9, 2022
Vite + Typescript + React 的问题? : r/reactjs
🌐 r/reactjs
In React v19, ref is now a prop. But how it would be using typescript?
React.RefObject or React.MutableRefObject More on reddit.com
🌐 r/react
11
8
June 5, 2024
Why are props not marked as readonly by default in TypeScript?
The reason why props are not marked as readonly by default in TypeScript is because TypeScript does not enforce immutability by default. In the context of React, props are meant to be immutable. This is a fundamental aspect of how React works, and it's a best practice that's enforced by the React runtime, not by TypeScript. So, I guess the point I'm trying to make is that TypeScript wasn't made to strongly compliment React and as such they have their own rulebook when it comes to principles. Whether you agree or not is up to you, but if they'd change this spec now, it would likely be a breaking change. More on reddit.com
🌐 r/reactjs
28
39
July 29, 2023
🌐
React TypeScript Cheatsheets
react-typescript-cheatsheet.netlify.app › function components
Function Components | React TypeScript Cheatsheets
However, the general consensus today is that React.FunctionComponent (or the shorthand React.FC) is not needed. If you're still using React 17 or TypeScript lower than 5.1, it is even discouraged.
🌐
DEV Community
dev.to › xenoxdev › usage-of-reactfc-from-my-experience-22n7
Usage of `React.FC` from my experience - DEV Community
February 13, 2022 - It doesn't need to be typed as React.FC. Now that we know it implies the children prop by default, use FC 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.
🌐
Adeel Imran
adeelhere.com › blog › 2025-10-21-react-fc-vs-standard-function-components-in-react-typescript
React.FC vs Standard Functions: Which Should You Use in 2025? | Adeel Imran
October 22, 2025 - As someone who's been building React applications for over 8 years, I've seen this discussion evolve from a heated controversy to a more nuanced choice. The good news? The most problematic issues with React.FC were fixed in React 18 and TypeScript 5.1. The even better news?
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
React.FC has been removed from create-react-app in January 2020: Remove React.FC from Typescript template facebook/create-react-app#8177
Author   payloadcms
🌐
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 - React Function Components (FCs) have become a popular way to create reusable components in React applications. TypeScript, with its strong type system, can help to ensure that our React components are type-safe and less prone to errors.
🌐
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 - In TypeScript, React.FC is a generic type provided by the React library to define the type of a functional component.
🌐
Echobind
echobind.com › post › react-with-typescript-components-as-function-declarations-vs-function-expressions
TypeScript: Function Declarations vs. Function Expressions
December 13, 2019 - React.FC indicates a “React Function Component”. So that’s why we type it this way. In the other instance, when we type a React component as a function declaration (i.e. function MyComponent), we ask the same thing. This time, we’re annotating the function return type.
🌐
Fettblog
fettblog.eu › typescript-react-why-i-dont-use-react-fc
TypeScript + React: Why I don't use React.FC
August 30, 2020 - Since version 3.1, TypeScript has a mechanism to understand defaultProps and can set default values based on the values you set. However, React.FC types defaultProps, and thus breaks the connection to use them as default values.
🌐
GitHub
github.com › typescript-cheatsheets › react
GitHub - typescript-cheatsheets/react: Cheatsheets for experienced React developers getting started with TypeScript · GitHub
However, the general consensus today is that React.FunctionComponent (or the shorthand React.FC) is not needed. If you're still using React 17 or TypeScript lower than 5.1, it is even discouraged.
Starred by 47K users
Forked by 4.3K users
Languages   JavaScript 93.9% | CSS 5.8% | Shell 0.3%
🌐
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 - React.FC is useful for beginners getting into typed React components as it guides you with types. But due to unnecessary addition of children, that you normally do not need, you should stay away and simply type like a normal Typescript function.
🌐
DEV Community
dev.to › itswillt › explaining-reacts-types-940
⚛️ Demystifying React's Types: Component types - DEV Community
May 1, 2024 - Let's dive into a detailed comparison of these types in pairs to understand their differences and appropriate use cases. React.FC is a type specifically used for defining function components in React.
🌐
Oida
oida.dev › typescript-react-why-i-dont-use-react-fc
TypeScript + React: Why I don't use React.FC - oida.dev
July 30, 2020 - Since version 3.1, TypeScript has a mechanism to understand defaultProps and can set default values based on the values you set. However, React.FC types defaultProps, and thus breaks the connection to use them as default values.
🌐
Flaming Codes
flaming.codes › posts › function components vs react.fc in typescript: a complete guide
Function Components vs React.FC in TypeScript: A Complete Guide
May 29, 2025 - React.FC (short for React.FunctionComponent) is a helper type that describes a function component. It offers a few default behaviors: It includes the children prop by default, whether you want it or not.
🌐
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 - React.FC stands for React Functional Component. It’s a type definition provided by React that you can use with TypeScript to define a functional component.