From da756a9710b9db61e202b2b66b8fe42dea677e40 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Fri, 23 Jun 2023 17:49:01 -0700
Subject: [PATCH 1/2] update style guide

---
 contributingGuides/STYLE.md | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/contributingGuides/STYLE.md b/contributingGuides/STYLE.md
index a318a529af01..960012608b6d 100644
--- a/contributingGuides/STYLE.md
+++ b/contributingGuides/STYLE.md
@@ -194,7 +194,7 @@ function populateShortcutModal(shouldShowAdvancedShortcuts) {
 ```
 
 ## Destructuring
-JavaScript destructuring is convenient and fun, but we should avoid using it in situations where it reduces code clarity. Here are some general guidelines on destructuring.
+We should avoid using object destructuring in situations where it reduces code clarity. Here are some general guidelines on destructuring.
 
 **General Guidelines**
 
@@ -210,30 +210,28 @@ const {name, accountID, email} = data;
 
 **React Components**
 
-Don't destructure props or state. It makes the source of a given variable unclear. This guideline helps us quickly know which variables are from props, state, or from some other scope.
+Always use destructing to get prop values. Destructing is necessary to assign default values to props. 
 
 ```javascript
 // Bad
-const {userData} = props;
-const {firstName, lastName} = state;
-...
-
-// Bad
-function UserInfo({name, email}) {
+function UserInfo(props) {
     return (
         <View>
-            <Text>Name: {name}</Text>
-            <Text>Email: {email}</Text>
+            <Text>Name: {props.name}</Text>
+            <Text>Email: {props.email}</Text>
         </View>
-    );
+}
+
+UserInfo.defaultProps = {
+    name: 'anonymous';
 }
 
 // Good
-function UserInfo(props) {
+function UserInfo({ name = 'anonymous', email }) {
     return (
         <View>
-            <Text>Name: {props.name}</Text>
-            <Text>Email: {props.email}</Text>
+            <Text>Name: {name}</Text>
+            <Text>Email: {email}</Text>
         </View>
     );
 }

From c24579548097a7cb0dfc2093052086f4c01251ed Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Fri, 30 Jun 2023 09:35:03 -0700
Subject: [PATCH 2/2] Fix typo with destructuring

Co-authored-by: Marc Glasser <marc.aaron.glasser@gmail.com>
---
 contributingGuides/STYLE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contributingGuides/STYLE.md b/contributingGuides/STYLE.md
index 960012608b6d..ce59438a0681 100644
--- a/contributingGuides/STYLE.md
+++ b/contributingGuides/STYLE.md
@@ -210,7 +210,7 @@ const {name, accountID, email} = data;
 
 **React Components**
 
-Always use destructing to get prop values. Destructing is necessary to assign default values to props. 
+Always use destructuring to get prop values. Destructuring is necessary to assign default values to props. 
 
 ```javascript
 // Bad