Define non-arrow React functional component for TypeScript?

Question

You can define a React functional component\'s types in TypeScript with this:

export const Component: React.FC = () => {
  return // Stuff
};
         


        

Answer 1

There is better type support for some certain cases when you declare component with const. To understand these cases you can have a look at the React.FC type:

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

}

Since react component (even function component) is a bit more than just a plain function - specifying precise type for component itself gives you better type inference:

function FooAsFunc({ children }) { // children has 'any' type
  return 1234
}

const FooAsConst: React.FC = ({ children }) => {
  return 1234 // type error: typescript knows that 1234 is not valid react component return type
}

FooAsFunc.displayName = new Date()
FooAsConst.displayName = new Date() // type error: 'displayName' suppose to be of a type string

In the end, same type safety can be achieved with function declaration as well, but it just requires more code.