From 1c6357637d688fd76fa812d285840f9c15695a6f Mon Sep 17 00:00:00 2001 From: Levente Balogh Date: Thu, 16 Mar 2023 09:57:29 +0100 Subject: [PATCH] FE Style Guide: Update component definition (#64869) * chore: update our FE styleguide related to React.FC * fix: typo --- contribute/style-guides/frontend.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/contribute/style-guides/frontend.md b/contribute/style-guides/frontend.md index dc0fc6e4427..c25b671a892 100644 --- a/contribute/style-guides/frontend.md +++ b/contribute/style-guides/frontend.md @@ -353,12 +353,26 @@ static defaultProps: Partial = { ... } ### How to declare functional components -We recommend using named regular functions when creating a new react functional component. +We prefer using function declarations over function expressions when creating a new react functional component. ```typescript +// bad +export const Component = (props: Props) => { ... } + +// bad +export const Component: React.FC = (props) => { ... } + +// good export function Component(props: Props) { ... } ``` +Some interesting readings on the topic: + +- [Create React App: Remove React.FC from typescript template](https://github.com/facebook/create-react-app/pull/8177) +- [Kent C. Dodds: How to write a React Component in Typescript](https://kentcdodds.com/blog/how-to-write-a-react-component-in-typescript) +- [Kent C. Dodds: Function forms](https://kentcdodds.com/blog/function-forms) +- [Sam Hendrickx: Why you probably shouldn't use React.FC?](https://medium.com/raccoons-group/why-you-probably-shouldnt-use-react-fc-to-type-your-react-components-37ca1243dd13) + ## State management - Don't mutate state in reducers or thunks.