What's the difference between a React.FunctionComponent and a plain JS function component?

Question

These two examples accomplish the same thing. But what are the differences under the hood? I understand functional components vs. React.Component and React.PureComponent, but I haven't been able to find relevant documentation about React.FunctionComponent.

React.FunctionComponent

const MyComponentA: React.FunctionComponent = (props) => {
  return (
    <p>I am a React.FunctionComponent</p>
  );
};

Plain JS function component:

const MyComponentB = (props) => {
  return (
    <p>I am a plain JS function component</p>
  );
};

Pretty sure they're exactly the same, but one is TypeScript and the other JavaScript. — Herohtar
– Herohtar, Commented Dec 26, 2018 at 19:01

Ryan Cogswell · Accepted Answer · 2018-12-26 19:05:12Z

52

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.

answered Dec 26, 2018 at 19:05

Ryan Cogswell

81.8k10 gold badges242 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xiechao06 Over a year ago

there is 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

philk Over a year ago

That not true. Under the hood FunctionComponent has at least the children property, while in your playin JS function component you would have to define it.

xiechao06 · Accepted Answer · 2020-05-06 10:25:20Z

15

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

answered May 6, 2020 at 10:25

xiechao06

4106 silver badges10 bronze badges

3 Comments

Joel Mellon Over a year ago

I'm new to TS, does anyone know why this is?

wybe Over a year ago

@JoelMellon in the first code example TypeScript will regard the function as just any normal function, and can "see" from it that it returns a string, which is all fine. In the section example we tell TS that the fuction is a React.FC (which is defined as returning ReactElement|null), but because the compiler sees that a string is returned a warning is generated.

Joel Mellon Over a year ago

Oh, got it. That makes perfect sense. I didn't really consider that React.FunctionComponent is a class and we're effectively type-hinting the function's return value. 10/10 Thanks, friend.

philk · Accepted Answer · 2020-10-10 19:01:10Z

11

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.

answered Oct 10, 2020 at 19:01

philk

2,1591 gold badge25 silver badges39 bronze badges

3 Comments

ParagDineshGupta Over a year ago

In React in both case props.children works.

ii iml0sto1 Over a year ago

For some reason, I do not get the children's property when using the FunctionComponent, exactly as you do in MyComponentA. I'm using react 18+... Or atleast typescript is showing errors...

cthulhu Over a year ago

This answer is no longer valid; they removed children from React.FunctionComponent because not all components do something with child properties. To make React.FunctionComponent accept children nowadays, you need to do: React.FunctionComponent<PropsWithChildren<Props>>.

Collectives™ on Stack Overflow

What's the difference between a React.FunctionComponent and a plain JS function component?

3 Answers 3

2 Comments

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related