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} ); }