Using a destructuring assignment on a style object to extract two members Recently, one of my colleague decided to destructure the React-Native styles object this way:

const { header, headerHint, bodyContainer, body, normalText, buttonWrapper, button, footer, footerLinks } = styles;


And then used the variables in the React code:

&lt;View style={header}&gt;
  &lt;Text style={headerHint}hint&lt;/Text&gt;
 ...
&lt;/View&gt;


This felt quite wrong to me as it doesn't provide much value to the code, destructuring an object to grab more than 5-6 variables makes the code more difficult to read in my opinion. 
Also, keeping the styles in the styles object let you know your styles comes from the StyleSheet. In some cases we might want to create variables to merge several styles, they become much easier to spot.

He argues destructuring reduces areas that you need to change - if you need to change them like if the styles object changes to something else, you don't have to remove all the references to styles.

I'm wondering what is your opinion on this point and if you follow any style guide about destructuring object like this one?
I think it is a matter of preference, and also of the size of the file. If it is larger with more variables then I would tend to using the styles. prefix to disambiguate. You could also compromise and go for s = styles followed by s.headerHint.

As to the name changing issue, you could always just write styles = newGangledStyles however most decent IDEs will refactor for you and even if they don't then this type of search and replace is usually pretty straight-forward and risk free also. I also suspect that, if the styles object did change, then it would be likely that the style names would also change. Using a styles. prefix actually makes it easier to locate usages.