Usage of `React.FC` from my experience

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,

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

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.

// 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.

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

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

See the CodeSandbox 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 🙌

• 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 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