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
Should FC still be used?
No! Facebook also removed it from CRA. Here is the PR: https://github.com/facebook/create-react-app/pull/8177 More on reddit.com
🌐 r/reactjs
49
18
January 15, 2023
React AuthContext with typescript 給予Cannot find ...
🌐 r/reactjs
Vite + Typescript + React 的问题? : r/reactjs
🌐 r/reactjs
🌐
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.
🌐
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.
🌐
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.
🌐
Parveen Kumar
parveenpal.hashnode.dev › reactfc-in-typescript
React.FC In typescript
October 5, 2024 - For example, if you rename a prop, typeScript compiler will catch any places where that prop is used and help you update them. ... import React from 'react'; interface Props { name: string; age: number; onClick: () => void; } const MyComponent: React.FC<Props> = ({ name, age, onClick }) => { return ( <div> <h1>{name}</h1> <p>Age: {age}</p> <button onClick={onClick}>Click me</button> </div> ); }; MyComponent.defaultProps = { name: 'Parveen', age: 35, onClick: () => {}, };