Don't use Function Components, use Void Function Components

One thing you'll come across when using Typescript with React is giving types to your components.

Most places I've seen will use React.FC for this:

const MyButton: React.FC<MyButtonProps> = ({prop1, prop2}) => {
  //...
}

And while React.FC is an actual type, most uses of it are incorrect.

This becomes clear when you look at its definition:

type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

The notable thing here is that props gets PropsWithChilren, which means that you component will be able to take children in adition to your other props you passed in.

On the other hand, there also exists Void Function Components or VFCs:

type VFC<P = {}> = VoidFunctionComponent<P>;

interface VoidFunctionComponent<P = {}> {
    (props: P, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

The only difference between this and FC is that when you tell it that P is its props, it will use just that, and it won't add an aditional children props to the final type.

conclusion

If you have some sort of pannel component or an abstract component which takes in children to render, then yeah, React.FC is the type for those.

But if the component you have isn't meant to have any more children, like a custom button or a custom card or input or whatever else, then using React.VFC is more correct.

Comments

[Chisomo Kenneth Lungu]

In the latest version of React. VoidFunctionComponent is now deprecated.

   /**
     * @deprecated - Equivalent with `React.FC`.
     */
    type VFC<P = {}> = VoidFunctionComponent<P>;

    /**
     * @deprecated - Equivalent with `React.FunctionComponent`.
     */

[Roy Revelt]

Good article! Tiny thing, in sentence "then yeah, React.RC is the type for those", it was meant to be React.FC, not React.RC.

[Aurora]

Fixed the typo, thanks!