What is the difference between React.FC<Props> and a plain functional component in TypeScript?

General Discussions
1

I’m learning TypeScript and came across these two ways to define a React component:

interface Props {
  name: string;
}


const PrintName: React.FC<Props> = (props) => { ... }

const PrintName2 = (props: Props) => { ... }

Both generate the same JavaScript, but PrintName2 seems more readable.

What are the differences between using rreact.fc and the plain functional component approach, and when should each be used?

2

Hey! I’ve had this debate myself :sweat_smile:. React.FC<Props> is basically a TypeScript type for functional components:

const PrintName: React.FC<Props> = (props) => { ... }

  • It automatically types children for you.
  • Ensures your component returns a valid React element.

The plain function approach:

const PrintName2 = (props: Props) => { ... }

  • Is simpler and more readable.
  • Doesn’t include the automatic children typing.

Many modern React devs prefer this because it avoids some quirks of React.FC

3

Differences in practice

From experience, here are the key differences:

Column 1 Column 2 Column 3
Feature React.FC Plain Function (props: Props)
children typed Yes, automatically No, you must type manually
Default props & displayName Supports via TypeScript Works, but less strict
Return type enforcement Ensures ReactElement Works but less explicit
Readability Slightly verbose Cleaner, simpler

I usually go with the plain function unless I specifically need children typed.

4

I’ve adopted this rule for my projects:

  • Use plain functional components for readability and simplicity.

  • Use React.FC if you rely on the automatic children typing or want stricter enforcement that your component always returns a React element.

Honestly, in most modern React + TypeScript codebases, plain functions are more popular and avoid some subtle issues with React.FC.