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