React + Typescript: Type of React component with no state/no props

As answered for this question, you can use the React.FC<{}> class

const MyStatelessComponent : React.FC<{}> = props =>
    <div>{props.children}</div>

Or if your markup gets bigger:

const MyStatelessComponent : React.FC<{}> = props => {

    {/*  Some code here */}
    return <div>{props.children}</div>

}

According to this guideline and my exp, I would say :

class Foo extends React.Component<null, null> {} when you know you will not recieve props nor state
class Foo extends React.Component<any, any> {} when you know you will recieve props and state but you really don't care what they look like
class Foo extends React.Component<{}, {}> {} never saw, seems strange
class Foo extends React.Component<undefined, undefined> {} same as null, it's up to you. I see more often null than undefined
class Foo extends React.Component<void, void> {} bad idea, since seems to be reserved for functions return (when you do not expect one)

Other opinions are welcomed

From https://github.com/DefinitelyTyped/DefinitelyTyped/blob/15b7bac31972fbc081028937dfb1487507ca5fc9/types/react/index.d.ts#L199-L200

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

Props and state are initialised to {}, so for a component with no state nor prop we can simply do:

class Foo extends React.Component {}

Related