what is the difference between ( )=>React.FC and ( )=>JSX.Element

Question

In React, it seems that I can declare a functional component or just a function returns a JSX element. What confusing me is I don't know the key difference between these two approaches. Is there anything only one approach can do while another can not?

import React from "react";

type ItemProps = {
    id: number
    name: string
}

const Item: React.FC<ItemProps> = ({ id, name }) =>
    (
        <section>
            my id is {id}
            my name is {name}
        </section>
    )

const item = ({ id, name }: ItemProps) =>
    (
        <section>
            my id is {id}
            my name is {name}
        </section>
    )

export const Container = () =>
    (
        <section>
            {item({ id: 1, name: "item-1" })}
            <Item id={1} name={"item-1"} />
        </section>
    )

Answer 1

Summarising the differences:

React.FC:

• has an implicit children prop, which means even if your component does not allow children, typescript would not complain if you are using React.FC and the parent passes a children. This does not impact anything at the runtime, but it is better to be more explicit about the children prop. This might be going away in the next version of React.FC, even now you can use React.VFC
• does not work well with defaultProps
• does not allow generics
• can't be used to annotate a function declaration, only function expressions
• makes "component as a namespace" pattern difficult to type

JSX.element + props interface

• does not have an implicit children prop, so you need to declare it explicitly, which is good, and some people prefer implicit return type anyway. This does not have default support for other/static properties like propTypes, displayName etc, so they would need to be added explicitly if required.
• does not care about default props, this is just regular function typing for arguments and return types
• can be used with generics
• can be used to annotate a function declaration as well as expressions

Resources

• https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/
• https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/
• https://github.com/facebook/create-react-app/pull/8177

Answer 2

React.FC offers Type checking support

You can also write components with React.FunctionComponent (or the shorthand React.FC - they are the same):

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

Some differences from the "normal function" version:

• React.FunctionComponent is explicit about the return type, while the normal function version is implicit (or else needs additional annotation).
• It provides typechecking and autocomplete for static properties like displayName, propTypes, and defaultProps.
  • Note that there are some known issues using defaultProps with
    React.FunctionComponent. See this issue for details. We maintain a
    separate defaultProps section you can also look up.
• It provides an implicit definition of children

Checkout docs for more information

https://github.com/typescript-cheatsheets/react/blob/main/README.md#section-2-getting-started

Answer 3

In React, the return of a function is JSX.Element. Even the return of the declaration in React.FC must be JSX.Element

If you have implicit return:

const Component: React.FC = () => {}

If you have explicit return

const Component = (): JSX.Element => {}

Answer 4

difference between these two approaches are documented here.

provides type checking and auto complete,