Avoid React.FC type


web

Sep 27, 2020

ACCEPTED

Thomas Vaillant

Context

Facebook has removed React.FC from their base template for a Typescript project. The reason for this was that it was found to be an unnecessary feature with next to no benefits in combination with a few downsides.

The main reasons were:

  • children props were implicitly added
  • Generic Type was not supported on children

Read more about the removal in this PR.

Decision

To keep our codebase up to date, we have decided that React.FC and React.SFC should be avoided in our codebase when adding new code.

Here is an example:

/* Avoid this: */
type BadProps = { text: string };
const BadComponent: FC<BadProps> = ({ text, children }) => (
  <div>
    <div>{text}</div>
    {children}
  </div>
);

/* Do this instead: */
type GoodProps = { text: string; children?: React.ReactNode };
const GoodComponent = ({ text, children }: GoodProps) => (
  <div>
    <div>{text}</div>
    {children}
  </div>
);