title: React: Props destructuring and memory usage
body: <p>Does using destructuring assignments affect memory usage/performance if the declared constants <strong>are only used once</strong>? In other languages (Java, C, etc), <strong>it's best not to declare a variable if it's only used once, as it allocates unnecessary memory</strong>. Is this also true with ES6 JS? </p>
  
  <p>I have 2 examples of what I'm talking about. The first uses destructuring assignments and calls each constant just once. The second calls this.props each time it is used and does not declare them in advance. Which one uses less memory? Our code base is pretty evenly split between the 2, but I'm curious as to which way is better for scale.</p>
  
  <p>with destructuring assignment for single-reference variables:</p>
  
  <pre><code>render(){
     const {
        a, b, c, d, e, f, g, h, i
     } = this.props;
     return(
        &lt;div&gt;
           &lt;div id={a}&gt;some text relevant to a&lt;/div&gt;
           &lt;div id={b}&gt;some text relevant to b&lt;/div&gt;
           &lt;div id={c}&gt;some text relevant to c&lt;/div&gt;
           &lt;div id={d}&gt;some text relevant to d&lt;/div&gt;
           &lt;div id={e}&gt;some text relevant to e&lt;/div&gt;
           &lt;div id={f}&gt;some text relevant to f&lt;/div&gt;
           &lt;div id={g}&gt;some text relevant to g&lt;/div&gt;
           &lt;div id={h}&gt;some text relevant to h&lt;/div&gt;
           &lt;div id={i}&gt;some text relevant to i&lt;/div&gt;
        &lt;/div&gt;
     );
  }
  </code></pre>
  
  <p>without declaring constants for single-reference variables:</p>
  
  <pre><code>render(){
     return(
        &lt;div&gt;
           &lt;div id={this.props.a}&gt;some text relevant to a&lt;/div&gt;
           &lt;div id={this.props.b}&gt;some text relevant to b&lt;/div&gt;
           &lt;div id={this.props.c}&gt;some text relevant to c&lt;/div&gt;
           &lt;div id={this.props.d}&gt;some text relevant to d&lt;/div&gt;
           &lt;div id={this.props.e}&gt;some text relevant to e&lt;/div&gt;
           &lt;div id={this.props.f}&gt;some text relevant to f&lt;/div&gt;
           &lt;div id={this.props.g}&gt;some text relevant to g&lt;/div&gt;
           &lt;div id={this.props.h}&gt;some text relevant to h&lt;/div&gt;
           &lt;div id={this.props.i}&gt;some text relevant to i&lt;/div&gt;
        &lt;/div&gt;
     );
  }
  </code></pre>