title: Variables Being Changed In Fetch But Unchanged Outside of Function
body: <p>I have a React App and I have an App container where I want to call a fetch to get some data to pass through to components that will need that information. </p>
  
  <p>I've declared variables outside of the an onload function (where my fetch is located) and assigned them different values in the fetch. They variables will change in the fetch but outside of the fetch they remain unchanged. </p>
  
  <p>How come they are not staying changed and is there a way to fix this?</p>
  
  <p>I've tried changed the variables declared with var instead of let and I've tried putting the function inside the const. </p>
  
  <p>I've also tried putting the fetch inside of other components (like Table as seen below) but then I have to declare two states and call a fetch withint a fetch because I'm already calling another fetch there and it becomes cumbersome...</p>
  
  <pre><code>let latestRelease = 0;
  let draftRelease = 0;
  let doClone = false;
  
  function onload() {
  
    fetch(url, {
      method: 'GET'
    })
      .then(function(response) {
        return response.json();
      })
      .then(function(result) {
        for(var i = 0; i &lt; result.length; i++)
        {
          if(result[i].id &gt; latestRelease &amp;&amp; result[i].status === "released") {
            latestRelease = result[i].id;
          }
  
          if(result[i].id &gt; draftRelease &amp;&amp; result[i].status === "draft") {
            draftRelease = result[i].id;
          }
        }
  
        if(latestRelease &gt; draftRelease) {
          doClone = true;
        }
      })
      .catch((error) =&gt; {
        console.log(error);
      });
  }
  
  const App: React.FC = () =&gt; {
  onload()
    return (
      &lt;React.Fragment&gt;
        &lt;CssBaseline /&gt;
        &lt;Container fixed&gt;
          &lt;PersistentDrawerLeft/&gt;
          {console.log(latestRelease)} //displays 0
                  &lt;Title/&gt;
            &lt;Table /&gt;
        &lt;/Container&gt;
      &lt;/React.Fragment&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>I'm expecting for latestRelease and draftRelease to not stay as 0 but anything greater than that but the output is just 0. With the correct values returned I'd then like to pass them as props to the components.</p>
  
  <p>Many thanks!</p>