adr006-avoid-react-fc.md

id	title	description
adrs-adr006	ADR006: Avoid React.FC and React.SFC	Architecture Decision Record (ADR) log on Avoid React.FC and React.SFC

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>
);

/* Or as a shorthand, if no specific child type is required */
type GoodProps = PropsWithChildren<{ text: string }>;
const GoodComponent = ({ text, children }: GoodProps) => (
  <div>
    <div>{text}</div>
    {children}
  </div>
);

Consequences

We will gradually remove the current usage of React.FC and React.SFC from our codebase.