Question: I've always defined React components (with typescript) as:

```
function MyComponent(props: PropsType): React.ReactElement | null {
    //...
}

```

Online I see a lot of examples like: 

```
const MyComponent: React.FC = (props: PropsType) => {
    //...
}

```

I understand they are pretty much the same, but what is the preferred convention in the Typescript community?

Answer: 
Quoting [React-Typescript Cheatsheet](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet) on Github

> 
> 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](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/87)
> * It provides an implicit definition of `children` (see below) - however there are some issues with the implicit `children` type (e.g.
>  [DefinitelyTyped#33006](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33006)),
>  and it might considered 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
>  constructor.
> * `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.
> 
> 
>
Create React App recently [dropped](https://github.com/facebook/create-react-app/pull/8177) `FC`/`FunctionComponent` type usage from the TypeScript template.

---

### Downsides of `FC`:

* implicit optional `children` - better define your props API explicitely
* no generic component creation possible
* no need to have explicit `ReactElement | null` return type, which in addition is [not accurate](https://reactjs.org/docs/react-component.html#render); it can be 1) better inferred automatically by TS or 2) set explicitely
* `FC` is just a wrapper for statics like `contextTypes`, `propTypes`, etc. which aren't needed in most cases
* doesn't work well with `defaultProps` (Note: JS default args should be [preferred](https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#deprecate-defaultprops-on-function-components) anyway)
* no need to remember "magic" types - just use functions for components
* doesn't make your code (much) leaner

---

So in summary, I would rather state the opposite: plain (arrow) functions > `React.FC`.