DEV Community

Krishna Damaraju for XenoX

Posted on

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

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>} />
  )
}
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

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 πŸ™Œ

Screenshot 2022-02-11 at 10.15.16 AM.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 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 **

originally published at here

Discussion (2)

Collapse
levi2ki profile image
Andrew Makarov

There is another utility type for components, that should not accept childrens - React.VFC - that type does not extend props with children attribute.

Your screenshot with function Greeteng({ children }: FC) error:
React.FC is alias for type that represents function, not properties object, thats why you facing error. Most common way to define type for props in such situation is to use PropsWithChildren utility type from React

export default function Greeting({ children }: React.PropsWithChildren<MyAwesomeProps>) {...}
Enter fullscreen mode Exit fullscreen mode

Or if you don't need children just type props like these:

export default function Greeting({ a }: { a: string }) {...} // no children in props
export default function Greeting({ a }: MyAwesomeProps) {...} // no children in props
Enter fullscreen mode Exit fullscreen mode

You won't loose types in JSX code.

Collapse
sarathsantoshdamaraju profile image
Krishna Damaraju Author

PropsWithChildren is TIL πŸ™Œ
Thank you