title: How to break infinite loop in componentDidUpdate in reactjs
body: <p>I am currently making dashboards using reactjs in which there are 4 tabs or buttons charts are creating properly but only problem is that when we click on different dashboard and it has same chart in same pannel than chart is not updating i have used both componentDidMount() and componentDidUpdate though its giving proper output but its creating an infinite loop i have also applied some conditions but its still in infinite loop Can anyone help me??</p>
  
  <p>here is my code</p>
  
  <pre><code>class BarChartComponent extends React.Component 
  {
  
     constructor(props) 
     {
        super(props);
  
        this.state = {
           data: null
        }
     };
  
     componentDidMount()
      {
              var that = this;
              $.ajax({
                      method: "GET",
                      url: "http://10.0.3.8:8050/querydata?query_id="+that.props.id,
                      success: function(data) 
                      {
  
                          console.log("component did mount method called");
                          console.log(1,JSON.stringify(data));
                          var BarChartData  = [
                          {
                              key: "totals",
                              values: []
                          }
                          ];
                          data.forEach(function (d)
                          {
                              d.value= +d.value
                              BarChartData[0].values.push(d)
                          }) 
                          console.log(2,JSON.stringify(BarChartData))
                          that.setState({data:BarChartData});
                      },
                      error: function(XMLHttpRequest, textStatus, errorThrown)
                      { 
                          console.error("Status: " + textStatus);
                          console.error("Error: " + errorThrown); 
                      }       
                  });         
      }
  
      componentDidUpdate(prevProps, prevState)
      {
                  if(prevState.data !== this.state.data )
                  {
                      var that = this;
                      $.ajax({
                          method: "GET",
                          url: "http://10.0.3.8:8050/querydata?query_id="+that.props.id,
                          success: function(data) 
                          {
  
                              console.log("component did update method called");
                              var BarChartData  = [
                              {
                                  key: "totals",
                                  values: []
                              }
                              ];
                              data.forEach(function (d)
                              {
                                  d.value= +d.value
                                  BarChartData[0].values.push(d)
                              }) 
  
                              if( prevProps.id !== that.state.id )
                              {
                                  that.setState({data:BarChartData});
                                  console.log(3,JSON.stringify(BarChartData))
                                  console.log(4,JSON.stringify(that.state.data))
                              }                   
                          },
                          error: function(XMLHttpRequest, textStatus, errorThrown)
                          { 
                              console.error("Status: " + textStatus);
                              console.error("Error: " + errorThrown); 
                          }       
                      });         
  
                  }
      }
  
  
  
      render()
      {
  
          if (this.state.data==null)
          {
              return (&lt;h1&gt;Loading...&lt;/h1&gt;);
          }
          return (
  
  
               &lt;NVD3Chart type="discreteBarChart" datum={this.state.data} x="name" y="value"/&gt;
  
          );
      }
  }
  
  window.BarChartComponent = BarChartComponent;
  </code></pre>