React component not re-rendering on state change

Question

I have a React Class that's going to an API to get content. I've confirmed the data is coming back, but it's not re-rendering:

var DealsList = React.createClass({   getInitialState: function() {     return { deals: [] };   },   componentDidMount: function() {     this.loadDealsFromServer();   },   loadDealsFromServer: function() {     var newDeals = [];      chrome.runtime.sendMessage({ action: "findDeals", personId: this.props.person.id }, function(deals) {       newDeals = deals;     });      this.setState({ deals: newDeals });   },   render: function() {     var dealNodes = this.state.deals.map(function(deal, index) {       return (         <Deal deal={deal} key={index} />       );     });     return (       <div className="deals">         <table>           <thead>             <tr>               <td>Name</td>               <td>Amount</td>               <td>Stage</td>               <td>Probability</td>               <td>Status</td>               <td>Exp. Close</td>             </tr>           </thead>           <tbody>             {dealNodes}           </tbody>         </table>       </div>     );   } }); 

However, if I add a debugger like below, newDeals are populated, and then once I continue, i see the data:

  loadDealsFromServer: function() {     var newDeals = [];      chrome.runtime.sendMessage({ action: "findDeals", personId: this.props.person.id }, function(deals) {       newDeals = deals;     });     debugger     this.setState({ deals: newDeals });   }, 

This is what's calling deals list:

var Gmail = React.createClass({   render: function() {     return (       <div className="main">         <div className="panel">           <DealsList person={this.props.person} />         </div>       </div>     );   } }); 

Answer 1

I'd like to add to this the enormously simple, but oh so easily made mistake of writing:

this.state.something = 'changed'; 

... and then not understanding why it's not rendering and Googling and coming on this page, only to realize that you should have written:

this.setState({something: 'changed'}); 

React only triggers a re-render if you use setState to update the state.