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

Question

What would the return type be here?

const Foo
  : () => // ???
  = () => (
    

      Foobar
    
  )

Answer 1

I would also add .SFC, which stands for Stateless Functional Component.

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

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

Answer 3

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 4

See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts

Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children).

function createElement<P extends DOMAttributes<T>, T extends Element>(
    type: string,
    props?: ClassAttributes<T> & P,
    ...children: ReactNode[]): DOMElement<P, T>;

So it's DOMElement<P, T>

Answer 5

The correct return type here is ReactElement<P>, but a better option would be to use React.StatelessComponent<P> like this

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