Should you use React.FC for typing React Components

Typescript provides some interfaces to help with writing React components. React.FC is one of those interfaces that is used in a lot of apps to define a functional component. The question you should ask yourself is: should you use React.FC for Typescript react components?

React.FC

This example shows how you can use React.FC in practice:

✍︎

and without `React.FC`:

✍︎

To type React component props specify the type interface inside of the Generic <> symbol after React.FC:

✍︎

and without React.FC:

✍︎

Pros of React.FC

1. Helps with Component props

React components have by default 4 props, e.g. Header.displayName: