title: React.js JSON data updates but state doesn't and hence UI doesn't update
body: <p>I am new to React.js and I love it. However, I am new to data-binding. So I picked a JSON data endpoint from jsontest.com to see if UI re-renders when the data changes. But I am confused because it doesn't.</p>
  
  <p><a href="http://www.jsontest.com/#date" rel="nofollow">http://www.jsontest.com/#date</a> provides time and date in JSON format which obviously updates every second but my UI is still the same.</p>
  
  <pre><code>const App = React.createClass({
  
    // Initial time to be empty string
    getInitialState: function () {
      return {
        time: ""
      }
    },
  
    componentDidMount: function() {
      $.ajax({
         url: this.props.url,
         dataType: 'json',
         cache: false,
         success: function(data) {
           // Setting the state to the response received from JSON endpoint
           this.setState({time: data.time});
           console.log(this.state);
         }.bind(this),
         error: function(xhr, status, err) {
           console.error(this.props.url, status, err.toString());
         }.bind(this)
       });
    },
  
  
    render: function() {
      return (
        &lt;div&gt;{this.state.time}&lt;/div&gt;
      );
    }
  });
  
  
  ReactDOM.render(
    &lt;App url={"http://date.jsontest.com/"} /&gt;,
    document.getElementById('content')
  );
  </code></pre>
  
  <p>Now my question is, if I have change the state every second using setInterval whats the point of [data changes -> state updates -> UI re-renders] concept? Perhaps I am expecting this work as webSockets so I could be wrong.</p>
  
  <p>Can anyone please explain?</p>