title: How does react handle functions/callbacks passed to event handlers?
body: <p>I looked for different blogs / documentation about this particular problem, I understand how a method needs to be bind before it can be used in the render function, however there were a few things the documentations fail to explain in detail, different ways a function can be passed into a event handler are:</p>
  <pre><code>// call a already bound funciton
  &lt;button onClick={this.sayHello}&gt;
    Click me!
  &lt;/button&gt;
  </code></pre>
  <pre><code>// bind in place 
  &lt;button onClick={this.sayHello.bind(this)}&gt;
    Click me!
  &lt;/button&gt;
  </code></pre>
  <pre><code>// use es6 arrow functions
  &lt;button onClick={() =&gt; alert('hello'))}&gt;
    Click me!
  &lt;/button&gt;
  </code></pre>
  <p>the react documentation says that the recommended way is to bind a function or the function will be called for every render of the component and can potentially mess with things.</p>
  <p>however I couldn't find why would it be called for every render.</p>
  <p>But would it not be called only when its clicked ?</p>
  <p>or</p>
  <p><strong>How does onClick handle or execute functions passed under the food ?</strong></p>