What is the TypeScript return type of a React stateless component?

Question

What would the return type be here?

const Foo   : () => // ???   = () => (     <div>       Foobar     </div>   ) 

Answer 1

StatelessComponent type mentioned in this answer has been deprecated because after introducing the Hooks API they are not always stateless.

A function component is of type React.FunctionComponent and it has an alias React.FC to keep things nice and short.

It has one required property, a function, which will return a ReactElement or null. It has a few optional properties, such as propTypes, contextTypes, defaultProps and displayName.

Here's an example:

const MyFunctionComponent: React.FC = (): ReactElement => {   return <div>Hello, I am a function component</div> } 

And here are the types from @types/react 16.8.24:

type FC<P = {}> = FunctionComponent<P>;  interface FunctionComponent<P = {}> {     (props: PropsWithChildren<P>, context?: any): ReactElement | null;     propTypes?: WeakValidationMap<P>;     contextTypes?: ValidationMap<any>;     defaultProps?: Partial<P>;     displayName?: string; } 

Answer 2

interface ISomeCoolInterface {    some: 'string';    cool: 'string';    props: 'string'  }      const SomeCoolComponent     : React.FC<ISomeCoolInterface>      = ({ some, cool, props }): JSX.Element => {         return <SomeCoolComponent>{some, cool, props}</SomeCoolComponent>           } 

The important bit here being the return type JSX.Element