From c5bdbdfe85ee6615dbfe593df99bb0b58d3b04d9 Mon Sep 17 00:00:00 2001 From: ellieseastream <67265053+ellieseastream@users.noreply.github.com> Date: Tue, 30 Jun 2020 16:08:15 +0200 Subject: [PATCH 1/6] Create adr006-avoid-react-fc --- docs/architecture-decisions/adr006-avoid-react-fc | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/architecture-decisions/adr006-avoid-react-fc diff --git a/docs/architecture-decisions/adr006-avoid-react-fc b/docs/architecture-decisions/adr006-avoid-react-fc new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/docs/architecture-decisions/adr006-avoid-react-fc @@ -0,0 +1 @@ + From 9f475bacd3253faa9cb38d5618606c608d45a1f0 Mon Sep 17 00:00:00 2001 From: ellieseastream <67265053+ellieseastream@users.noreply.github.com> Date: Tue, 30 Jun 2020 16:10:57 +0200 Subject: [PATCH 2/6] Rename adr006-avoid-react-fc to adr006-avoid-react-fc.md --- .../{adr006-avoid-react-fc => adr006-avoid-react-fc.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/architecture-decisions/{adr006-avoid-react-fc => adr006-avoid-react-fc.md} (100%) diff --git a/docs/architecture-decisions/adr006-avoid-react-fc b/docs/architecture-decisions/adr006-avoid-react-fc.md similarity index 100% rename from docs/architecture-decisions/adr006-avoid-react-fc rename to docs/architecture-decisions/adr006-avoid-react-fc.md From b926b4ef7b91bf275ba7832d54df61857838faac Mon Sep 17 00:00:00 2001 From: ellieseastream <67265053+ellieseastream@users.noreply.github.com> Date: Tue, 30 Jun 2020 17:08:39 +0200 Subject: [PATCH 3/6] Added example of changing existing React.FC code --- .../adr006-avoid-react-fc.md | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/docs/architecture-decisions/adr006-avoid-react-fc.md b/docs/architecture-decisions/adr006-avoid-react-fc.md index 8b13789179..4b28d72361 100644 --- a/docs/architecture-decisions/adr006-avoid-react-fc.md +++ b/docs/architecture-decisions/adr006-avoid-react-fc.md @@ -1 +1,28 @@ +# ADR006: Avoid React.FC +## 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 + +## 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 React.FC +const ComponentWithReactFC = React.FC = ({text} =>
{text}
) + +// do this instead +const ComponentWithoutReactFC = ({text} : MyType) =>
{text}
+```` + +## Consequences + +We will gradually remove the current usage of React.FC from our codebase. From b6ec4298bc19879008c3853a71a06b1cb2a36c27 Mon Sep 17 00:00:00 2001 From: ellieseastream <67265053+ellieseastream@users.noreply.github.com> Date: Wed, 1 Jul 2020 16:21:07 +0200 Subject: [PATCH 4/6] Added PR link and edited example. --- .../adr006-avoid-react-fc.md | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) 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. From 4491e52567f7418e6baf45616f76cbde8e9d2aa6 Mon Sep 17 00:00:00 2001 From: ellieseastream <67265053+ellieseastream@users.noreply.github.com> Date: Wed, 1 Jul 2020 16:22:04 +0200 Subject: [PATCH 5/6] Update adr006-avoid-react-fc.md --- docs/architecture-decisions/adr006-avoid-react-fc.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/architecture-decisions/adr006-avoid-react-fc.md b/docs/architecture-decisions/adr006-avoid-react-fc.md index 53cc3df7ca..af8db8795d 100644 --- a/docs/architecture-decisions/adr006-avoid-react-fc.md +++ b/docs/architecture-decisions/adr006-avoid-react-fc.md @@ -12,7 +12,7 @@ Read more about the removal in [this PR](https://github.com/facebook/create-reac ## Decision -To keep our codebase up to date, we have decided that React.FC should be avoided in our codebase when adding new code. +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: ```` From cec455c0e42d7a3f582cd14cbbe36288bf2a1b92 Mon Sep 17 00:00:00 2001 From: ellieseastream <67265053+ellieseastream@users.noreply.github.com> Date: Wed, 1 Jul 2020 17:30:28 +0200 Subject: [PATCH 6/6] Update adr006-avoid-react-fc.md --- .../adr006-avoid-react-fc.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/docs/architecture-decisions/adr006-avoid-react-fc.md b/docs/architecture-decisions/adr006-avoid-react-fc.md index af8db8795d..89234c0697 100644 --- a/docs/architecture-decisions/adr006-avoid-react-fc.md +++ b/docs/architecture-decisions/adr006-avoid-react-fc.md @@ -2,23 +2,22 @@ ## 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. +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 +- **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. +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}
@@ -26,17 +25,16 @@ const BadComponent: FC = ({ text, children }) => (
) - /* Do this instead: */ -type GoodProps = { text: string; children?: React.ReactNode }; +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. +We will gradually remove the current usage of `React.FC` and `React.SFC` from our codebase.