What is the TypeScript return type of a React stateless component?
What would the return type be here?
const Foo
: () => // ???
= () => (
<div>
Foobar
</div>
)
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;
}
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
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>
)