backstage/docs/architecture-decisions/adr006-avoid-react-fc.md

ADR006: 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 lacked support

Read more about the removal in this PR.

Decision

To keep our codebase up to date, we have decided that React.FC 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>
)

Consequences

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