title: How to stop component from from re-rendering multiple times?
body: <p>I have a component which contains a couple of others which are dependent on reducer states. Whenever I run the actions within the component, it rerenders multiple times. The last two rerenders are completely in the render function, I was not aware that this happens. 
  I have tried tracking the render using the react dev tools in chrome and not sure why or how this is happening. All seems logical, it runs what needs to be ran and then rerenders two more times after.</p>
  
  <p>I cannot use a should-component update due to not having anyone variable that I can use to rely on.</p>
  
  <p>Has anyone else had an issue close to this? If so how did you approach resolving this issue?</p>
  
  <p>main component</p>
  
  <pre class="lang-js prettyprint-override"><code>
  class LoadTable extends React.Component {
      constructor(props) {
          super(props);
      }
      componentDidMount() {
          this.setState({ fetchInProgress: true });
          const getJobsPromise = this.props.getJobs(null, null);
          const getJobNamesPromise = this.props.getJobNames();
  
          Promise.all([getJobsPromise, getJobNamesPromise])
              .then(([jobsRes, jobNamesRes]) =&gt; {
                  if (jobsRes.results.response.length &gt; 0) {
                      var initStart = jobsRes.results.response[0].ID;
                      var initEnd = jobsRes.results.response[jobsRes.results.response.length - 1].ID;
                      var newStart = initStart;
                      var newEnd = initEnd;
                      var snewStart = null;
                      var snewEnd = null;
                      var sinitStart = null;
                      var sinitEnd = null;
                      var filterOn = false;
                      var searchOn = false;
                      var pagMax = (Math.ceil(jobsRes.results.response.length / 10) &gt; 0) ? Math.ceil(jobsRes.results.response.length) / 10 : 0;
                      pagMax = pagMax + 1;
                      this.props.dispatch({ type: jobConstants.JOB_SUCCESS, newStart, newEnd, initStart, initEnd, pagMax, snewStart, snewEnd, sinitStart, sinitEnd, filterOn, searchOn });
                  }                
                  this.setState({                    
                      fetchInProgress: false,
                      panelOpen: false,
                      data: jobsRes.results.response || [],                    
                      jobNames: jobNamesRes.results.response || [],
                  });
              });
  }
      runLog(id) {
          this.props.runLog(id);
      }
      openRunLog(logs) {
          this.props.findOutput(logs);
      } 
  
      handleJobName(e) {
          if (e.target.value === 'default') {
              this.setState({
                  selectedJName: 0
              });
          } else {
              this.setState({
                  selectedJName: e.target.value
              });
          }
      }    
  
      clearSearch() {
          this.setState({ fetchInProgress: true });
          this.props.getJobs(null, null) 
              .then((res) =&gt; {
                  this.setState({
                      data: res.results.response || [],    
                      fetchInProgress: false,
                      searchOn: false,
                      sort: {
                          column: null,
                          direction: 'desc',
                      }
                  })
              });
      }
      handleSearch(e) {
          const { name, value } = e.target;  
          const { SearchEndLoc, SearchStrtLoc, SearchIntStrt, SearchIntEnd, EndLoc, StartLoc  } = this.props;
          this.setState({ [name]: value });       
  
          var initStart;
          var initEnd;
          var newStart;
          var newEnd;
          var pagMax;
          var snewStart;
          var snewEnd;
          var sinitStart;
          var sinitEnd;
          var searchOn;
          var filterOn;
          this.setState({ fetchInProgress: true });       
          if (value.length &lt; 1) {            
              searchOn = false;
              this.props.getJobs(EndLoc, StartLoc)
                  .then((res) =&gt; {
                       initStart = this.props.initStart;
                       initEnd = this.props.initEnd;
                       newStart = StartLoc;
                       newEnd = EndLoc;
                       snewStart = null;
                       snewEnd = null;
                       sinitStart = null;
                       sinitEnd = null;
                       filterOn = false;
                       pagMax = (Math.ceil(res.results.response.length / 10) &gt; 0) ? Math.ceil(res.results.response.length / 10) : 0;
                       pagMax = pagMax + 1;
                      this.props.dispatch({ type: jobConstants.JOB_SUCCESS, newStart, newEnd, initStart, initEnd, pagMax, snewStart, snewEnd, sinitStart, sinitEnd,searchOn, filterOn});
                      this.setState({
                          data: res.results.response || [], 
                          fetchInProgress: false,                        
                          Search: '',
                          panelOpen: false,
                          searchRNames: [],
                          sort: {
                              column: null,
                              direction: 'desc'                           
                          }
                      }) 
                  });
          } else {   
          searchOn = true;    
          this.props.doSearch(value, SearchEndLoc, SearchStrtLoc)
                  .then((res) =&gt; {
                      if (res.results.response.length &gt; 0) {
                          sinitStart = SearchIntStrt === null || SearchIntStrt === undefined ? res.results.response[0].ID : SearchIntStrt;
                          sinitEnd = SearchIntEnd === null || SearchIntEnd === undefined ? res.results.response[res.results.response.length - 1].ID : SearchIntEnd;
                          snewStart = sinitStart;
                          snewEnd = sinitEnd;    
                          newStart = null;
                          newEnd = null;
                          initStart = null;
                          initEnd = null;
                          filterOn = false;
                          pagMax = (Math.ceil(res.results.response.length / 10) &gt; 0) ? Math.ceil(res.results.response.length / 10) : 0;
                          pagMax = pagMax + 1;                         
                          this.props.dispatch({ type: jobConstants.JOB_SUCCESS, newStart, newEnd, initStart, initEnd, pagMax, snewStart, snewEnd, sinitStart, sinitEnd, searchOn, filterOn});
                      }
                          this.setState({
                              data: res.results.response || [],                               
                              searchRNames: res.results.response || [],                           
                              SearchOn: searchOn,
                              filterOn: filterOn,
                              panelOpen: true,
                              fetchInProgress: false,
                              Search: value,                            
                              sort: {
                                  column: null,
                                  direction: 'desc',
                              }
                      })
  
                  });
          }
      }    
      onChangePage(changePage) {      
          this.setState({ pageOfItems: changePage.pageOfItems });
          if (changePage.searchOn === true) {
              this.updateOnSearch(changePage);
          }
          if (changePage.filterOn === true) {
              this.updateOnFilter(changePage);
          }
          if ((changePage.searchOn === false) &amp;&amp; (!changePage.filterOn === false)) {
              this.updateOnRegular(changePage);
          }
      }
      updateOnSearch(changePage) {             
          var newStart = changePage.newStart;
          var newEnd = changePage.newEnd;
          var initStart = changePage.initStart;
          var initEnd = changePage.initEnd;
          var snewStart = changePage.snewStart;
          var snewEnd = changePage.snewEnd;
          var sinitStart = changePage.sinitStart;
          var sinitEnd = changePage.sinitEnd;
          var searchOn = true;
          var filterOn = false;
          var pagMax;
  
          if ((changePage.snewStart === null) &amp;&amp; (changePage.snewEnd === null)) {            
              this.setState({ fetchInProgress: true });
              this.props.doSearch(this.state.Search, changePage.newEnd, changePage.newStart)
                  .then((res) =&gt; {
                      if (res.results.response.length &gt; 0) {
                          sinitStart = res.results.response[0].ID;
                          sinitEnd = res.results.response[res.results.response.length - 1].ID;
                          snewStart = changePage.sinitStart;
                          snewEnd = changePage.sinitEnd;
                          pagMax = (Math.ceil(res.results.response.length / 10) &gt; 0) ? Math.ceil(res.results.response.length / 10) : 0;
                          pagMax = pagMax + 1;
                          this.props.dispatch({ type: jobConstants.JOB_SUCCESS, newStart, newEnd, initStart, initEnd, pagMax, snewStart, snewEnd, sinitStart, sinitEnd, searchOn, filterOn });
                      }
                      this.setState({
                          fetchInProgress: false,
                          searchOn: searchOn,
                          filterOn: filterOn,
                          panelOpen: true,
                          pageOfItems: res.results.response || [],
                          sort: {
                              column: null,
                              direction: 'desc',
                          }
                      })
                  });
          }
          if ((changePage.snewStart !== null) &amp;&amp; (changePage.snewEnd !== null)) {
              this.setState({ fetchInProgress: true });
              this.props.doSearch(this.state.Search, changePage.snewEnd, changePage.snewStart)
                  .then((res) =&gt; {
                      if (res.results.response.length &gt; 0) {
                          snewStart = res.results.response[0].ID;
                          snewEnd = res.results.response[res.results.response.length - 1].ID;
                          pagMax = (Math.ceil(res.results.response.length / 10) &gt; 0) ? Math.ceil(res.results.response.length / 10) : 0;
                          pagMax = pagMax + 1;
                          searchOn = false;                        
                          this.props.dispatch({ type: jobConstants.JOB_SUCCESS, newStart, newEnd, initStart, initEnd, pagMax, snewStart, snewEnd, sinitStart, sinitEnd, searchOn, filterOn });
                      }
                      this.setState({
                          data: res.results.response || [],
                          fetchInProgress: false,
                          searchOn: searchOn,
                          filterOn: filterOn,
                          panelOpen: true,
                          pageOfItems: res.results.response || [],
                          sort: {
                              column: null,
                              direction: 'desc',
                          }
                      })
  
                  });
          }      
      }
      updateOnFilter(changePage) {
          const { selectedDRan, selectedDStart, selectedDEnd, selectedJName} = this.state;
          var newStart = changePage.newStart;
          var newEnd = changePage.newEnd;
          var initStart = changePage.initStart;
          var initEnd = changePage.initEnd;
          var snewStart = changePage.snewStart;
          var snewEnd = changePage.snewEnd;
          var sinitStart = changePage.sinitStart;
          var sinitEnd = changePage.sinitEnd;
          var searchOn = false;
          var filterOn = true;
          var pagMax;
  
          if ((snewStart === null) &amp;&amp; (snewEnd === null)) {
              this.setState({ fetchInProgress: true });
              this.props.filterJobs(selectedJName, selectedDRan, selectedDStart, selectedDEnd, snewStart, snewEnd)
                  .then((res) =&gt; {
                      if (res.results.response.length &gt; 0) {
                          sinitStart = res.results.response[0].ID;
                          sinitEnd = res.results.response[res.results.response.length - 1].ID;
                          snewStart = changePage.sinitStart;
                          snewEnd = changePage.sinitEnd;
                          pagMax = (Math.ceil(res.results.response.length / 10) &gt; 0) ? Math.ceil(res.results.response.length / 10) : 0;
                          pagMax = pagMax + 1;
                          searchOn = false;
                          this.props.dispatch({ type: jobConstants.JOB_SUCCESS, newStart, newEnd, initStart, initEnd, pagMax, snewStart, snewEnd, sinitStart, sinitEnd, searchOn, filterOn });
                      }
                      this.setState({
                          fetchInProgress: false,
                          searchOn: searchOn,
                          filterOn: filterOn,
                          panelOpen: true,
                          pageOfItems: res.results.response || [],
                          sort: {
                              column: null,
                              direction: 'desc',
                          }
                      })
                  });
          }
          if ((snewStart !== null) &amp;&amp; (snewEnd !== null)) {
              this.setState({ fetchInProgress: true });
              this.props.filterJobs(selectedJName, selectedDRan, selectedDStart, selectedDEnd, snewStart, snewEnd)
                  .then((res) =&gt; {
                      if (res.results.response.length &gt; 0) {
                          snewStart = res.results.response[0].ID;
                          snewEnd = res.results.response[res.results.response.length - 1].ID;
                          pagMax = (Math.ceil(res.results.response.length / 10) &gt; 0) ? Math.ceil(res.results.response.length / 10) : 0;
                          pagMax = pagMax + 1;
                          searchOn = false;
                          this.props.dispatch({ type: jobConstants.JOB_SUCCESS, newStart, newEnd, initStart, initEnd, pagMax, snewStart, snewEnd, sinitStart, sinitEnd, searchOn, filterOn });
                      }
                      this.setState({
                          data: res.results.response || [],
                          fetchInProgress: false,
                          searchOn: searchOn,
                          filterOn: filterOn,
                          panelOpen: true,
                          pageOfItems: res.results.response || [],
                          sort: {
                              column: null,
                              direction: 'desc',
                          }
                      })
                  });
          }
      }
      updateOnRegular(changePage) {        
          var newStart = changePage.newStart;
          var newEnd = changePage.newEnd;
          var initStart = changePage.initStart;
          var initEnd = changePage.initEnd;
          var snewStart = changePage.snewStart;
          var snewEnd = changePage.snewEnd;
          var sinitStart = changePage.sinitStart;
          var sinitEnd = changePage.sinitEnd;
          var searchOn = changePage.searchOn;
          var filterOn = changePage.filterOn;
          var pagMax;
  
          if ((changePage.newStart !== null) &amp;&amp; (changePage.newEnd !== null)) {
              this.setState({ fetchInProgress: true });
              this.props.getJobs(changePage.newEnd, changePage.newStart)
                  .then((res) =&gt; {
                      if (res.results.response.length &gt; 0) {
                          newStart = res.results.response[0].ID;
                          newEnd = res.results.response[res.results.response.length - 1].ID;
                          snewStart = null;
                          snewEnd = null;
                          sinitStart = null;
                          sinitEnd = null;
                          pagMax = (Math.ceil(res.results.response.length / 10) &gt; 0) ? Math.ceil(res.results.response.length / 10) : 0;
                          pagMax = pagMax + 1;
                          this.props.dispatch({ type: jobConstants.JOB_SUCCESS, newStart, newEnd, initStart, initEnd, pagMax, snewStart, snewEnd, sinitStart, sinitEnd, searchOn, filterOn });
                      }
                      this.setState({                        
                          fetchInProgress: false,
                          pageOfItems: res.results.response || [],
                          sort: {
                              column: null,
                              direction: 'desc',
                          }
                      })
                  });
          }
      }
  
      onFilterChange() {        
          const { selectedDRan, selectedDStart, selectedDEnd, selectedJName,jobNames } = this.state;
          this.setState({ fetchInProgress: true, filterOn: true });
          var filterOn = true;
          var searchOn = false;
          var filterCheck = this.state.filterCheck;
          var initEnd;
          var initStart
          var newStart;
          var newEnd;
          var pagMax;
  
          if (filterCheck &lt; 1) {
              this.props.filterJobs(selectedJName, selectedDRan, selectedDStart, selectedDEnd, null, null)
                  .then((res) =&gt; {
                      if (res.results.response.length &gt; 0) {
                           initStart = res.results.response[0].ID;
                           initEnd = res.results.response[res.results.response.length - 1].ID;
                           newStart = initStart;
                           newEnd = initEnd;
                           pagMax = (Math.ceil(res.results.response.length / 10) &gt; 0) ? Math.ceil(res.results.response.length) / 10 : 0;
                           pagMax = pagMax + 1;
                          this.props.dispatch({ type: jobConstants.JOB_SUCCESS, newStart, newEnd, initStart, initEnd, pagMax, selectedDRan, selectedDStart, selectedDEnd, jobNames, searchOn, filterOn });
                      }                    
                      filterCheck = filterCheck + 1; 
                      this.setState({
                          data: res.results.response || [],
                          fetchInProgress: false,
                          filterOn: filterOn,
                          searchOn: searchOn,
                          filterCheck: filterCheck,
                          panelOpen: true,                        
                          sort: {
                              column: null,
                              direction: 'desc',
                          }
                      })
                  });
          } else {
              this.props.filterJobs(selectedJName, selectedDRan, selectedDStart, selectedDEnd, this.props.snewEnd, this.props.snewStart)
                  .then((res) =&gt; {
                      if (res.results.response.length &gt; 0) {
                          newStart = res.results.response[0].ID;
                          newEnd = res.results.response[res.results.response.length - 1].ID;
                          pagMax = (Math.ceil(res.results.response.length / 10) &gt; 0) ? Math.ceil(res.results.response.length / 10) : 0;
                          pagMax = pagMax + 1;
                          this.props.dispatch({ type: jobConstants.JOB_SUCCESS, newStart, newEnd, initStart, initEnd, pagMax, selectedDRan, selectedDStart, selectedDEnd, jobNames, searchOn, filterOn });
                      }
                      filterCheck = filterCheck + 1;
                      this.setState({
                          data: res.results.response || [],
                          fetchInProgress: false,
                          filterOn: filterOn,
                          searchOn: searchOn,
                          panelOpen: true,
                          filterCheck: filterCheck,
                          pageOfItems: res.results.response || [],
                          sort: {
                              column: null,
                              direction: 'desc',
                          }
                      })
                  });
  
          }
  
      }
      onFilterClear() {
          this.setState({ fetchInProgress: true });
          const getJobsPromise = this.props.getJobs(null, null);
          const getJobNamesPromise = this.props.getJobNames();
  
          Promise.all([getJobsPromise, getJobNamesPromise])
              .then(([jobsRes, jobNamesRes]) =&gt; {
                  if (jobsRes.results.response.length &gt; 0) {
                      var initStart = jobsRes.results.response[0].ID;
                      var initEnd = jobsRes.results.response[jobsRes.results.response.length - 1].ID;
                      var newStart = initStart;
                      var newEnd = initEnd;
                      var snewStart = null;
                      var snewEnd = null;
                      var sinitStart = null;
                      var sinitEnd = null;
                      var filterOn = false;
                      var searchOn = false;
                      var pagMax = (Math.ceil(jobsRes.results.response.length / 10) &gt; 0) ? Math.ceil(jobsRes.results.response.length) / 10 : 0;
                      pagMax = pagMax + 1;
                      this.props.dispatch({ type: jobConstants.JOB_SUCCESS, newStart, newEnd, initStart, initEnd, pagMax, snewStart, snewEnd, sinitStart, sinitEnd, filterOn, searchOn });
                  }
                  this.setState({
                      fetchInProgress: false,
                      panelOpen: false,
                      data: jobsRes.results.response || [],
                      jobNames: jobNamesRes.results.response || [],
                  });
              });
      }
      render() { 
                 const { data, Search, pageOfItems, searchRNames, fetchInProgress, jobNames, selectedDRan, selectedDStart, selectedDEnd, selectedJName, panelOpen} = this.state; 
          const { jobRun } = this.props;       
  
          return(
          &lt;div&gt;
                  {fetchInProgress ? (
                      &lt;div className="row row-centered"&gt;
                              &lt;p&gt;Loading.....Please Wait&lt;/p&gt;
                          &lt;/div&gt;
                     &lt;/div&gt;                   
                   ) : (
                      data.length &lt; 0 ? ( 
                                             &lt;div className="searchNoContent"&gt;&lt;h3&gt;No Data to Display at the moment&lt;/h3&gt;&lt;/div&gt;
                      &lt;/div&gt;
                    )  : (
                      &lt;div className="row row-centered"&gt;                       
                          &lt;div className="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-centered"&gt;
                           {!IsEmpty(jobRun) &amp;&amp; &lt;Alert color="success"&gt;{jobRun}&lt;/Alert&gt;}
                                          &lt;div className="wrap-collabsible"&gt;
                                              &lt;input id="collapsible" className="toggle tCheck" type="checkbox" value={panelOpen} onChange={this.handleCheckBox} checked={panelOpen} /&gt;
                                              &lt;label htmlFor="collapsible" className="lbl-toggle"&gt;Filter/Search Jobs&lt;/label&gt;
                                                  &lt;div className="collapsible-content"&gt;
                                                      &lt;div className="content-inner"&gt;
                                                              &lt;div id="Search" className=""&gt;
                                                                  &lt;div className="input-group"&gt;
                                                                      &lt;Autocomplete
                                                                          getItemValue={(item) =&gt; item.Name}
                                                                          items={searchRNames}
                                                                          inputProps={{ className: 'form-control searchIte ms', placeholder: 'Search', name: 'Search', autoFocus: true }}
                                                                          value={Search}
                                                                          onSelect={(Search, item) =&gt; this.setState({ Search, searchRNames: item })}
                                                                          renderItem={(item, isHighlighted) =&gt;
                                                                              &lt;div&gt;&lt;/div&gt;
                                                                          }
                                                                          onChange={this.handleSearch}
                                                                      /&gt;
                                                                  &lt;/div&gt;
                                                              &lt;/div&gt;
                                                              &lt;div className="tableFilter"&gt;
                                                                  &lt;div className='filterArea'&gt;
  
                                                                      &lt;div className='filterBody'&gt;
                                                                          &lt;p className='filterLabel'&gt;Job Name: &lt;/p&gt;
                                                                  &lt;select defaultValue={selectedJName} className='itemList' onChange={this.handleJobName}&gt;
                                                                              &lt;option key='0' value='0'&gt;--Select--&lt;/option&gt;
                                                                      {jobNames.map((jbName) =&gt; &lt;option key={jbName.ID} value={jbName.ID}&gt;{jbName.Name}&lt;/option&gt;)}                                                                        &lt;/select&gt;                                                                            &lt;button type="button" className="btn btn-success jobFilterBtn " onClick={()=&gt;this.onFilterChange()}&gt;Filter Jobs&lt;/button&gt;                                                                            &lt;button type="button" className="btn btn-danger jobFilterBtn " onClick={() =&gt; this.onFilterClear()}&gt;Clear Filter&lt;/button&gt;
                                                                          &lt;/div&gt;
                                                                          &lt;/div&gt;
                                                                       &lt;/div&gt;
                                                                &lt;/div&gt;
                                                              &lt;/div&gt;                                                
                                                      &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;table className="table table-striped"&gt;
                                              &lt;thead&gt;
                                                  &lt;tr&gt;
                                                      &lt;th className="columnHeader" onClick={() =&gt; this.doSort('name')}&gt;Name&lt;/th&gt;
                                                      &lt;th className="columnHeader" onClick={() =&gt; this.doSort('date')}&gt;Date Ran&lt;/th&gt;
                                                      &lt;th className="columnHeader" onClick={() =&gt; this.doSort('job')}&gt;Job&lt;/th&gt;
                                                      &lt;th className="columnHeader" onClick={() =&gt; this.doSort('start')}&gt;Start&lt;/th&gt;
                                                      &lt;th className="columnHeader" onClick={() =&gt; this.doSort('end')}&gt;End&lt;/th&gt;
                                                      &lt;th className="columnHeader" onClick={() =&gt; this.doSort('status')}&gt;Status&lt;/th&gt;
                                                      &lt;th&gt;&lt;/th&gt;
                                                      &lt;th&gt;&lt;/th&gt;
                                                      &lt;th&gt;&lt;/th&gt;
                                                  &lt;/tr&gt;
                                              &lt;/thead&gt;
                                              &lt;tbody&gt;
                                                  {
                                                      pageOfItems.map(dt =&gt; {
                                                          return (                                                            
                                                              &lt;/tr&gt;
                                                          );
                                                      })
                                                  }
                                              &lt;/tbody&gt;
                                     &lt;/table&gt;  
                               &lt;BOPagination items={data} onChangePage={this.onChangePage.bind(this)} /&gt;
                           &lt;/div&gt;                                   
                     &lt;/div&gt;                
                         ))}
                 &lt;/div&gt; 
                 );
  }
  }
  
  </code></pre>