What is React.FC?

React.FC (or React.FunctionComponent) is a TypeScript type used to define functional components in React. It helps you add type safety to your props, making your components more predictable and easier to maintain.

Basic Syntax

import React from 'react';

type MyProps = {
  name: string;
};

const MyComponent: React.FC<MyProps> = ({ name }) => {
  return <h1>Hello, {name}</h1>;
};

export default MyComponent;

Here:

• MyProps defines the props type.
• React.FC<MyProps> tells TypeScript that MyComponent is a function component that takes name as a string prop.

Advantages of React.FC

• Props Type Inference
  TypeScript infers prop types automatically inside the component.
• Children Support
  React.FC automatically includes children in the props.

const Wrapper: React.FC = ({ children }) => {
  return <div>{children}</div>;
};

• Autocompletion and IntelliSense
  Helps IDEs provide better autocompletion and documentation for props.

Drawbacks of React.FC

• Implicit children may be confusing when your component shouldn’t receive children.
• DefaultProps and Generics support is slightly less clean compared to using plain function types.
• Some teams prefer not to use React.FC for stricter control and clarity.

Alternative (Manual Function Typing)

Instead of React.FC, you can also define your component like this:

type MyProps = {
  name: string;
};

function MyComponent({ name }: MyProps) {
  return <h1>Hello, {name}</h1>;
}

Both are correct — choose based on your team’s convention or preference.