title: React component unexpectedly unmounting
body: <p>My React component is behaving almost as planned, except that once I set state and it re-renders, it then proceeds to unmount, and remount, causing the initial state to be reset and go through the whole life cycle again. I am completely at a loss as to why this is occuring. Here is my component: </p>
  
  <pre><code>var AllCompanies = React.createClass({
  
  getInitialState: function () {
    return { companies: [] };
  },
  
  componentDidMount: function () {
    if (this.state.companies.length &lt; 1) {
      this.fetchCompanies();
    }
  },
  
  fetchCompanies: function () {
    var that = this;
    $.ajax({
      url: 'companies',
      method: "GET",
      dataType: "json",
      success: function (user_companies) {
        that.setState({ companies: user_companies })
      }
    });
  },
  
  addCompany: function (event) {
    var that = this;
    var company = {
      name: React.findDOMNode(this.refs.companyName).value,
      ticker: React.findDOMNode(this.refs.companyTicker).value,
    }
  
  var newCompanies = this.state.companies.concat(company)
  
    $.ajax({
      url: 'companies',
      method: "POST",
      dataType: "json",
      data: {company: company},
      success: function (company) {
        that.setState({ companies: newCompanies })
      }
    });
  },
  
  render: function () {
  
    var toRender;
    var companyForm = (
      &lt;form className="new_company_form" onSubmit={this.addCompany}&gt;
        &lt;input type="text" ref="companyName" name="company[name]" placeholder="Company Name" /&gt;
        &lt;input type="text" ref="companyTicker" name="company[ticker]" placeholder="Ticker Symbol" /&gt;
        &lt;button&gt;Add Company&lt;/button&gt;
      &lt;/form&gt;
    );
  
    if (this.state.companies.length &gt; 0) {
      toRender = (&lt;div&gt;
                    {this.state.companies.map(function (company) {
                        return (&lt;div key={company.id} &gt;{company.name + ": " + company.ticker}&lt;/div&gt;);
                      })
                    }
                  &lt;/div&gt;
                  );
    } else {
      toRender = (&lt;div&gt;spinner.gif&lt;/div&gt;);
    }
  
    return (&lt;div&gt;
              {companyForm}
              {toRender}
            &lt;/div&gt;
          );
    }
  
  }); 
  </code></pre>