React function component without children in TypeScript

Update: Beginning with React 18 you don't need the VFC or VoidFunctionComponent interfaces anymore. The children property has been removed from the FC and FunctionComponent interfaces.

If you create a function component in React using TypeScript, there's the FC or FunctionComponent interface that you can use to define the type of your component. The interface automatically adds the children property to let the parent component pass child elements to your component.

If your component does not accept children, you can use the VCF or VoidFunctionComponent interface instead. It does not add the children property.

import { FC, VFC } from "react";

export interface Props {
  msg: string;
}

export const MyCompWithChildren: FC<Props> = (props) => {
  return <div>...</div>;
};

export const MyCompWithoutChildren: VFC<Props> = (props) => {
  return <div>...</div>;
};