diff --git a/contributingGuides/STYLE.md b/contributingGuides/STYLE.md
index a318a529af01..ce59438a0681 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 destructuring to get prop values. Destructuring 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 (
- Name: {name}
- Email: {email}
+ Name: {props.name}
+ Email: {props.email}
- );
+}
+
+UserInfo.defaultProps = {
+ name: 'anonymous';
}
// Good
-function UserInfo(props) {
+function UserInfo({ name = 'anonymous', email }) {
return (
- Name: {props.name}
- Email: {props.email}
+ Name: {name}
+ Email: {email}
);
}