score:46

Accepted answer

There is no difference under the hood. The first one is using TypeScript syntax to indicate the type of React.FunctionComponent but they are both plain JS function components.

score:10

The difference is that FunctionComponent comes with one property by default: children


// Note, no children defined
type Props = {
  name: string
}

const MyComponentA: React.FunctionComponent<Props> = (props) => {
  return (
    <p>I am a React.FunctionComponent and my name is {props.name}</p>
    <p>And I have {props.children}</p>
  );
};

const MyComponentB = (props: Props) => {
  return (
    <p>I am a plain JS function component</p>
    <p>But my {props.children} are undefined</p>
  );
};

For MyComponentB the TS compiler would complain that children is not defined.

Of course for both components you can just pass children and ignore the TS warning.

score:13

there are some minor differences, plain function component could return string, like:

const FooString = () => "foo";

but you couldn't return string from a FunctionComponent.

const BarString: React.FC<{}> = () => "string";

hence the return type must be ReactElement|null


Related Query

More Query from same tag