Usage of `React.FC` from my experience
Tags: react, typescript, javascript, frontend
Published: 2022-02-13 15:07:19

---
title: Usage of `React.FC` from my experience
published: true
description: There are mixed opinions on using it and it was recently removed from the Create React App template. I am sharing my views on the front.
tags: #react #reactJs #typescript #javascript #frontend
---

I have been working with React + Typescript setup for a year and a half and if you are someone like me, I bet you could have seen or used Typescript interface `FC` at least once. On that note, I want to share a few things related to `React.FC`, which are purely out of my experience using it. Please consider this just as an opinion, nothing much and nothing less.


### What is `React.FC` or `React.FunctionalComponent`

`React.FC` is a generic interface for the functional components, one of the two ways to write components in React. This is not an inbuilt type, but comes as a part of the `@types/react`

Below is a general way to write a component that takes children, 


```jsx
const CardComponentNonFC = ({
  title, 
  children
  }:{ 
  title: string, 
  children: ReactNode
  })  => {
    return (
       <div className="card">
          <h1 className="card__title">{title}</h1>
          <div className="card__content">
            {children}
          </div>
      </div>
    )
}
``` 


And the same code can be written with `React.FC` in the following



```jsx
import React, { FC } from "react";

const CardComponentFC:FC<{ 
  title: string
  }> = ({
  title, 
  children
  })  => {
    return (
       <div className="card">
          <h1 className="card__title">{title}</h1>
          <div className="card__content">
            {children}
          </div>
      </div>
    )
}
``` 

### How do i use it 👍

- Cleaner code and Better DX (Developer Experience) with the default `children` prop. It makes a component container by the behaviour and less mental toll in understanding the code.

```jsx

// With FC
import React, { FC } from "react";

const Card = () => {
  return (
    <CardComponentFC {...}> // CardComponentFC is defined above
      <div> ... </div>
    </CardComponentFC>
  )
}


// same without FC
const CardNonFC = () => {
  return (
    <CardComponentNonFC 
      {...}
      children={  <div> ... </div>} />
  )
}
``` 

For me, the first code is much cleaner and easier to understand. 

- Second and last reason is the return type restrictions. I'd like my component to always return an element or null _(null is mostly the bottom type of my components)_ and I don't like undefined being returned. `React.FC` has that check, by default, to prevent returning `undefined`.

```jsx
import { FC } from "react";
export const Container: FC = ({ children }) => {
  if (children) {
    return <>{children}</>;
  }

 //💥 this would through the error
  return undefined;
};
```

See the [CodeSandbox](https://codesandbox.io/s/old-snow-hxk96?file=/src/functional-component.tsx) for the same.

### How do i NOT use it 👎

- I tried to use it for the default functional exports over the functional expressions. I had a hard time with it. _Let me know if you have solved it 🙌_

![Screenshot 2022-02-11 at 10.15.16 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644554746808/apVonO9Ud.png)

- **If a component that doesn't need to render children**. It doesn't need to be typed as `React.FC`. Now that we know it implies the `children` prop by default, use `FC` only where it makes sense. Not every component need to accommodate the children.

- Generics in React typescript is something I like and has the flexibility. `React.FC` doesn't seem to fit well with that.


### Summary

There are mixed opinions on using it and it was recently [removed](https://github.com/facebook/create-react-app/pull/8177) from the Create React App template. There are a few posts suggesting not to use it, but from experience, you may not have any huge performance implications of not using it. 

There are definitely some limitations/disadvantages of using it, but I would rather say that depends on the component. Not all components need memoisation or hooks, similarly, not all components need `FC`. If you can draw that thin line, you can happily use it.


** References to read more about it **
- https://github.com/facebook/create-react-app/pull/8177
- https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components
- https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33006
- https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/
- https://stackoverflow.com/questions/51459971/type-of-generic-stateless-component-react-or-extending-generic-function-interfa

_originally published at [here](https://krishna-damaraju.hashnode.dev/usage-of-reactfc-from-my-experience)_