From e226480e060c4d7c0d737e295cddfbd1f98900be Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Tue, 19 Oct 2021 07:30:43 +0100
Subject: [PATCH] Docs: update frontend style guide to highlight new function
 paradigm (#40347)

* docs: update frontend style guide to highlight new function paradigm

* docs: add section for default exports

* chore: some typo/syntax/grammar fixes

* chore: change new additions from rule to recommendation

* small typo fix
---
 contribute/style-guides/frontend.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/contribute/style-guides/frontend.md b/contribute/style-guides/frontend.md
index ba7b4572d99..b133f1a4484 100644
--- a/contribute/style-guides/frontend.md
+++ b/contribute/style-guides/frontend.md
@@ -268,6 +268,7 @@ For code that needs to be used by external plugin:
 
 - Use named exports for all code you want to export from a file.
 - Use declaration exports (i.e. `export const foo = ...`).
+- Avoid using default exports (for example, `export default foo`).
 - Export only the code that is meant to be used outside the module.
 
 ### Comments
@@ -344,6 +345,14 @@ static defaultProps = { ... }
 static defaultProps: Partial<Props> = { ... }
 ```
 
+### How to declare functional components
+
+We recommend using named regular functions when creating a new react functional component.
+
+```typescript
+export function Component(props: Props): ReactElement { ... }
+```
+
 ## State management
 
 - Don't mutate state in reducers or thunks.