diff --git a/docs/architecture-decisions/adr006-avoid-react-fc.md b/docs/architecture-decisions/adr006-avoid-react-fc.md index 4b28d72361..53cc3df7ca 100644 --- a/docs/architecture-decisions/adr006-avoid-react-fc.md +++ b/docs/architecture-decisions/adr006-avoid-react-fc.md @@ -1,4 +1,4 @@ -# ADR006: Avoid React.FC +# ADR006: Avoid React.FC and React.SFC ## Context @@ -8,21 +8,35 @@ The main reasons were: - **children props** were implicitly added - **Generic Type** lacked support +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 should be avoided in our codebase when adding new code. Here is an example: ```` -type MyType = { text: string } +/* Avoid this: */ +type BadProps = { text: string; }; -// avoid React.FC -const ComponentWithReactFC = React.FC = ({text} =>
{text}
) +const BadComponent: FC = ({ text, children }) => ( +
+
{text}
+ {children} +
+) -// do this instead -const ComponentWithoutReactFC = ({text} : MyType) =>
{text}
+ +/* 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 from our codebase. +We will gradually remove the current usage of React.FC and React.SFC from our codebase.