Should you use React.FC for typing React Components

Harry Mumford-Turner
3 min readJan 11, 2021

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:

--

--

Harry Mumford-Turner

Frontend engineer working at OakNorth London. Message me for any questions, I usually respond in a couple of days! http://harrymt.com/