title: React Re-renders When Parent State is Changed Through Child Component
body: <p>In App.js, I am passing <code>setURL(page){ ... }</code> as a prop to HealthForm.
  In HealthForm, I have an input field that takes a String of an URL and a button that initiates a fetch call to my backend server and some data is received back in a promise object. I also call  <code>that.props.changeUrl(that.state.someURL);</code>inside the promiseStatus function because that's the only place I could place it without getting the following warning:</p>
  
  <pre><code>Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
  </code></pre>
  
  <p>However, every time that <code>that.props.changeUrl(that.state.someURL)</code> is called, the page re-renders. Basically -- the input field and the additional functions that were rendered due to the fetch call -- all reset. The url state in App.js gets updated though.</p>
  
  <p>Why does the whole page re-renders when I'm calling the parent props?</p>
  
  <p>The app does not re-render if the line <code>that.props.changeUrl(that.state.someURL)</code> is simply deleted but of-course it doesn't change the App state</p>
  
  <p>I need the page to not re-render because vital information is rendered after the fetch call which cannot be seen since the re-render resets that route.</p>
  
  <p>App.js</p>
  
  <pre><code>class App extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              url: '',
  
          };
          this.setURL = this.setURL.bind(this);
      }
  
      setURL(link) {
          this.setState({
              url: link
          });
      }
  
      render(){
          return(
  
              &lt;MuiThemeProvider&gt;
                  &lt;Router&gt;
                      &lt;div className="App"&gt;
                          &lt;Route path="/" component={Header}&gt;&lt;/Route&gt;
  
                          &lt;Route path="/health" component={()=&gt;(
                              &lt;HealthForm changeUrl={this.setURL}/&gt;)}&gt;&lt;/Route&gt;
  
                          &lt;Route path="/path1" component={wForm}&gt;&lt;/Route&gt;
                          &lt;Route path="/path2" component={xForm}&gt;&lt;/Route&gt;
                          &lt;Route path="/path3" component={yForm}&gt;&lt;/Route&gt;
                          &lt;Route path="/path4" component={zForm}&gt;&lt;/Route&gt;
  
                      &lt;/div&gt;
                  &lt;/Router&gt;
              &lt;/MuiThemeProvider&gt;
          );
      }   
  }
  </code></pre>
  
  <p>HealthForm.js</p>
  
  <pre><code>class HealthForm extends React.Component {
    constructor(props) {
     super(props);
      this.state = {
          exampleURL: '',
          exampleURLError: '',
          status: '',
          showStatus: false
      };
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
   }
  
   validate = () =&gt; {
   //…checks for input errors
         }
  
   handleChange(event) {
      this.setState({
          [event.target.name]: event.target.value
      });
   }
  
   handleSubmit(event) {
      event.preventDefault();
      const err = this.validate();
      let that = this;
      if (!err) {
                     this.setState({
          exampleURLError: ''
          });
          console.log(this.state);
          var data = this.state.exampleURL
  
          fetch('htpp://...', {
                      method: 'POST',
                      body: JSON.stringify(data)
                  })
                  .then((result) =&gt; {
                      var promiseStatus = result.text();
                      promiseStatus.then(function (value) {
                          that.setState({
                              status: value,
                              showStatus: true
                          });
                          that.props.changeUrl(that.state.jarvisURL);
                      });
                  }).catch((error) =&gt; {
                      console.log(error);
                  });
      }
   }
  
   render() {
          return (
              &lt;form&gt;  
              &lt;TextField
                ...
              /&gt;
              &lt;br/&gt;
  
               &lt;Button variant="contained" size="small" color="primary"     onClick={e =&gt; this.handleSubmit(e)} &gt;
                  Check
              &lt;/Button&gt;
              &lt;br /&gt;  &lt;br /&gt; 
  
               ...
  
              &lt;/form&gt;  
          );
   }
  }
  export default HealthForm;
  </code></pre>