diff --git a/docs/architecture-decisions/adr006-avoid-react-fc.md b/docs/architecture-decisions/adr006-avoid-react-fc.md new file mode 100644 index 0000000000..89234c0697 --- /dev/null +++ b/docs/architecture-decisions/adr006-avoid-react-fc.md @@ -0,0 +1,40 @@ +# 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** were not supported on children + +Read more about the removal in [this PR](https://github.com/facebook/create-react-app/pull/8177). + +## 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: +```ts +/* Avoid this: */ +type BadProps = { text: string; }; +const BadComponent: FC = ({ text, children }) => ( +
+
{text}
+ {children} +
+) + +/* Do this instead: */ +type GoodProps = { text: string; children?: React.ReactNode; }; +const GoodComponent = ({ text, children }: GoodProps) => ( +
+
{text}
+ {children} +
+) +``` + +## Consequences + +We will gradually remove the current usage of `React.FC` and `React.SFC` from our codebase.