title: Destructuring state in React render
body: <p>I see a lot of examples that show a React component that looks like this:</p>
  
  <pre><code>class MyComponent extends Component {
     constructor(props) {
       super(props)
  
       this.state = {
         foo: 'foo',
         bar: 'bar'
       }
     }
  
     render() {
       const { foo, bar } = this.state
  
       return &lt;Text&gt;{foo}{bar}&lt;/Text&gt;
     }
  }
  </code></pre>
  
  <p>As you can see, the component's state has been destructured. I can see that the JSX looks cleaner, but it appears that it would be harder to know that a variables came from the components state. Is there any benefit of doing this in terms of best practices or is it just a preference?</p>
  
  <p>Thanks.</p>