El tipo StatelessComponent mencionado en esta respuesta ha quedado obsoleto porque después de presentar la API de Hooks, no siempre son sin estado.

Un componente de función es del tipo React.FunctionComponent y tiene un alias React.FC para simplificar las cosas.

Tiene una propiedad requerida, una función, que devolverá un ReactElement o null . Tiene algunas propiedades opcionales, como propTypes , contextTypes , defaultProps y displayName .

Aquí hay un ejemplo:

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

Y aquí están los tipos de @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; }

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

Lo importante aquí es el tipo de retorno JSX.Element

El tipo de retorno correcto aquí es ReactElement<P> , pero una mejor opción sería usar React.StatelessComponent<P> así

 const Foo : React.StatelessComponent<{}> = () => ( <div> Foobar </div> )