title: React - defaultProps vs ES6 default params when destructuring (performances issues)
body: <p>I just came across a question about React performances when settings default values in one of my <strong>stateless functional components</strong>.</p>
  
  <p>This component had a <code>defaultProps</code> which defined <code>row: false</code>, but I didn't like it because the <code>defaultProps</code> is <strong>at the end</strong> of the file, which actually makes it harder to see. And thus, we aren't aware of the default property. So I moved it to the function declaration directly and assigned it using ES6 default value for parameters.</p>
  
  <pre><code>const FormField = ({
    row = false,
    ...others,
  }) =&gt; {
    // logic...
  };
  </code></pre>
  
  <p>But then we argued with a coworker about this <strong>being a good idea or not</strong>. Because doing so may seem trivial, but may also have a great impact upon performances since <strong>react is not aware</strong> of the default value. </p>
  
  <p>I believe in this case, it's trivial. Because it's a boolean and not an object/array and therefore won't be seen as a different value during <em>reconciliation</em>. </p>
  
  <hr>
  
  <p>But, let's now see a more advanced use-case:</p>
  
  <pre><code>const FormField = ({
    input: { name, value, ...inputRest },
    label = capitalize(name),
    placeholder = label,
    row = false,
    meta: { touched, error, warning },
    ...others,
  }) =&gt; {
    // logic...
  };
  </code></pre>
  
  <p>Here, I base the value of <code>placeholder</code> from <code>label</code>, which itself is based on <code>input.name</code>. Using ES6 destructuring with default values for parameters makes the whole thing quite easy to write/understand and it works like a charm.</p>
  
  <p>But is it a good idea? And if not, then how would you do it properly?</p>