title: What's the actual cost of defining new function within react render method?
body: <p>I'm trying to clarify the pros/cons of having a new function declaration within react's render method.</p>
  
  <p>Consider a render method like the following:</p>
  
  <pre><code>  render () {
      return (&lt;SomeComponent somePropWithoutEventBind={() =&gt; console.log('not so dangerous?')} /&gt;)
    }
  </code></pre>
  
  <p>In the above example, <code>somePropWithoutEventBind</code> doesn't bind to a DOM event: react will check for prop changes and every time render is called this prop has changed - because it's a new function - so it never matches the previous, this is expensive but nothing tremendous.</p>
  
  <p>Now in this case</p>
  
  <pre><code>  render () {
      return (&lt;input onChange={() =&gt; console.log('dangerous?')} /&gt;)
    }
  </code></pre>
  
  <p>onChange <code>prop</code> <strong>does</strong> bind to DOM (doing something like <code>addEventListener</code>) so every render will have to <code>removeEventListener</code> and <code>addEventListener</code> again? Is this the main reason behind avoiding to declare functions inside the render method?</p>
  
  <p>If possible, please justify your answer pointing to react source code.</p>