React 02 : Understanding React.FC

React.FC is a TypeScript type used to define function components in React, with the full name being React.FunctionComponent. It provides a type-safe declaration method that allows developers to explicitly specify the props types for components in TypeScript React projects and ensures the component conforms to the structure of a React function component.

1. What is React.FC?

React.FC is a generic interface provided by TypeScript to describe a React function component. It is essentially an alias for React.FunctionComponent, defining a function that accepts props parameters and returns JSX elements (or ReactNode).

In React, a function component is an ordinary JavaScript function, for example:

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

When using TypeScript, you can add types to this component via React.FC:

import React from 'react';

const MyComponent: React.FC<{ name: string }> = (props) => {
  return <div>Hello, {props.name}!</div>;
};

Here, React.FC<{ name: string }> tells TypeScript that this component’s props is an object that must include a name property of type string.

2. Basic Usage of React.FC

The main purpose of React.FC is to provide type checking for function components. It accepts a generic parameter to define the type of props. Here is a complete example:

import React from 'react';

// Define the props type
interface MyComponentProps {
  name: string;
  age?: number; // Optional property
}

// Use React.FC to define the component
const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      Hello, {name}! {age && `You are ${age} years old.`}
    </div>
  );
};

// Use the component
<MyComponent name="Alice" age={25} />;

In this example:

• The MyComponentProps interface defines the component’s props types.
• React.FC ensures that the props received by the component conform to this interface.
• TypeScript will check whether the component is used correctly, such as reporting errors if name is missing or if incorrect types are passed.

3. Implicit Features of React.FC

When using React.FC, it automatically adds some default type support, such as:

The children property: React.FC automatically includes children in the props type, even if you don’t explicitly declare it. This is because React components typically can accept child nodes. Example:

const ParentComponent: React.FC<{ title: string }> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

// Valid usage
<ParentComponent title="Header">This is content</ParentComponent>;

Here, even though title is the only explicit prop, children can still be used because it’s built into React.FC.

4. Advantages of React.FC

• Type Safety: Ensures components receive the correct props through TypeScript’s type checking, reducing runtime errors.
• Conciseness: More concise compared to manually defining function types (such as (props: Props) => JSX.Element).
• Built-in Support: Automatically supports children, suitable for most scenarios.

5. Disadvantages and Controversies of React.FC

Despite being commonly used, React.FC has some controversies, and many developers (including React’s official documentation) recommend avoiding it. The reasons are as follows:

(1) The Problem with Implicit Children

React.FC adds children by default, but in some components, you might not want to support children. This leads to inaccurate typing. For example:

const NoChildrenComponent: React.FC<{ message: string }> = ({ message }) => {
  return <div>{message}</div>;
};

// Unexpectedly valid, but logically shouldn't have children
<NoChildrenComponent message="Hi">Oops</NoChildrenComponent>;

If you don’t want your component to support children, you need additional handling to disable it.

(2) Type Inference Issues

(3) Redundancy

The type definition of React.FC is actually redundant because TypeScript can infer types well from function signatures. For example:

// Not using React.FC
const MyComponent = ({ name }: { name: string }) => {
  return <div>Hello, {name}</div>;
};

This approach is more concise, and TypeScript can still correctly infer the props type.

(4) Compatibility with Hooks

In some complex scenarios (such as using forwardRef or custom Hooks), React.FC’s type definition may cause problems that require additional adjustments.

6. Alternatives

Due to the above issues, many developers prefer to use function signatures directly instead of React.FC:

interface Props {
  name: string;
}

const MyComponent = ({ name }: Props) => {
  return <div>Hello, {name}</div>;
};

This approach:

• Is more flexible, not forcing children.
• Has more natural type inference.
• Is more consistent with React’s modern best practices.

If you need to explicitly disable children, you can use type tools:

interface Props {
  name: string;
  children?: never; // Disable children
}

7. Summary

• What React.FC is: It’s a type in TypeScript for defining React function components, providing type safety and conciseness.
• When to use it: Suitable for simple components, especially scenarios requiring children.
• When not to use it: If you need more precise control (such as disabling children) or pursue conciseness, you can use function signatures directly.
• Best practices: Choose based on team habits, but the modern trend leans toward avoiding React.FC and using type inference directly.