TypeScript React.FC confusion

When working with TypeScript and React, you may come across the React.FC syntax and wonder what it means. This confusion is understandable, as the React documentation does not provide a clear explanation of this syntax. In this blog post, we will demystify the React.FC confusion and explore its purpose and usage.

Understanding React.FC

The React.FC syntax is a type alias provided by TypeScript that stands for “Function Component”. It is used to define functional components in React with TypeScript type checking. The Props parameter represents the type of the props object that the component receives.

Using React.FC provides several benefits:

• It ensures that the component receives the correct props and enforces type checking.
• It automatically provides type inference for the children prop, allowing you to use the component as a wrapper component.
• It provides better support for defaultProps and propTypes.

Example Usage

Let’s take a look at an example to understand how to use React.FC in practice:

import React from 'react';

type MyComponentProps = {
  name: string;
  age: number;
};

const MyComponent: React.FC = ({ name, age }) => {
  return (
    

      Name: {name}
      Age: {age}
    
  );
};

export default MyComponent;

In the above example, we define a functional component called MyComponent that receives two props: name (a string) and age (a number). We use the React.FC syntax to specify the type of props that the component expects.

Now, when using MyComponent elsewhere in our code, TypeScript will enforce type checking and provide auto-completion for the props:

import React from 'react';
import MyComponent from './MyComponent';

const App: React.FC = () => {
  return (
    

      
    
  );
};

export default App;

In the above example, we import and use MyComponent in our App component. TypeScript will ensure that we pass the correct props to MyComponent and provide auto-completion for the props.

Alternative Syntax

While React.FC is the most commonly used syntax for functional components, there is an alternative syntax without using React.FC:

import React from 'react';

type MyComponentProps = {
  name: string;
  age: number;
};

const MyComponent: React.FunctionComponent = ({ name, age }) => {
  return (
    

      Name: {name}
      Age: {age}
    
  );
};

export default MyComponent;

The above code achieves the same result as the previous example but uses React.FunctionComponent instead of React.FC. Both syntaxes are equivalent, so you can choose the one that you find more readable or prefer.

Now that you understand the React.FC syntax and its purpose, you can confidently use it in your TypeScript and React projects. It provides type safety and improved development experience when working with functional components.