title: onClick called repeatedly (not supposed to) when component re-renders
body: <p>I have a react component which is a form. When user clicks on the send/submit button, a function is called to handle data saving and do some other tasks. </p>
  
  <p>The issue is after the user clicks the button, the component seems to re-render several times (most likely because the external props it receives from other components got updated). That in itself is not a problem. </p>
  
  <p>However, when the component updates, the <code>onClick</code> function gets called again, even though user hasn't clicked on the button again. </p>
  
  <p>This is the part I don't understand. Why does the <code>onClick</code> function gets triggered when the component updates? And how can I prevent this from happening?</p>
  
  <p>I don't want to stop the component from updating after user clicks on the button. Because the user may want to change something in the form and send it again.</p>
  
  <p>The component in a nutshell looks like the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Form extends Component{
    constructor(props) {
      super(props);
      this.state = {
        input: '',
      }
    }
    
    save() {
      // do something
      // and something else...
      alert('data saved!');
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;input
              type="text"
              onChange={(e) =&gt; {this.setState({input: e.target.value})}}
              value={this.state.input}
            /&gt;
          &lt;/div&gt;
          &lt;div onClick={this.save.bind(this)}&gt;
           &lt;span&gt;submit&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>* UPDATE *</strong>
  I think I figured out what went wrong.</p>
  
  <p>What I didn't mention in the post above is that there's a firebase auth event listener inside of the <code>save</code> function, to make sure user is authenticated. It looked like this:</p>
  
  <pre><code>save () {
    firebase.auth().onAuthStateChanged(function(user) {
                if (user) {
                   // do something
                   // and something else
                   alert('data saved');
                } else {
                  // do something else
                }
    });
  }
  </code></pre>
  
  <p>That event listener for some reason gets triggered multiple times (it shouldn't) after user submitting. The bottomline is his is not related to component updating.</p>
  
  <p>I now have assigned a value to the event listener and set it to null after it's triggered once, like so:</p>
  
  <pre><code>save () {
    const that = this;
    this.firebaseListener = firebase.auth().onAuthStateChanged(function(user) {
                if (user) {
                   // do something
                   // and something else
                   alert('data saved');
                   that.firebaseListener = null; 
                } else {
                  // do something else
                }
    });
    this.firebaseListener &amp;&amp; this.firebaseListener();
  }
  </code></pre>
  
  <p>This seems to be working so far...</p>