title: react.js, axios and typescript. api call is never being called
body: <p>I am trying to get a simple API call and render some json in the browser. Then I want to make an object and print it out, pretty simple. However, I see nothing in the network tab and of course no output.</p>
  <p>My api call</p>
  <pre><code>const axios = require('axios');
  
  export class AppService {
  
      public async GetHelloWorld(): Promise&lt;any&gt; {
          const response = await axios.get(`http://localhost:8080/api`, {
              method: &quot;Get&quot;,
              headers: {
                  &quot;Content-type&quot;: &quot;application/json; charset=UTF-8&quot;
              }
          }).catch(() =&gt; console.log(&quot;Issue in GetHelloWorld&quot;))
  
          return response.data
      }
  
  }
  </code></pre>
  <p>here I would expect the <code>no hello world for you</code> but even that doesn't print.</p>
  <pre><code>function Hello() {
      const api = new AppService()
  
      const result = async () =&gt; {
          const response = await api.GetHelloWorld();
          console.log(&quot;The response: &quot; + response)
      }
  
      return (
          &lt;div className=&quot;App&quot;&gt;
              &lt;h2&gt;Test&lt;/h2&gt;
              {result ? JSON.stringify(result) : &quot;no hello world for you!&quot;}
          &lt;/div&gt;
      );
  }
  export default Hello;
  </code></pre>
  <p>main</p>
  <pre><code>import React from 'react';
  import './App.css';
  import Hello from './pages/hello'
  
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello world&lt;/h1&gt;
        &lt;Hello/&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>-- Update 1 ----
  --- using UseEffect() ---</p>
  <pre><code>import {AppService} from &quot;../services/app.service&quot;;
  
  function Hello() {
      const api = new AppService()
      let response
  
      useEffect(()=&gt;{
          response = async () =&gt; {
              response = await api.GetHelloWorld();
              console.log(&quot;The response: &quot; + response)
          }
          response()
  
      },[])
  
      return (
          &lt;div className=&quot;App&quot;&gt;
              &lt;h2&gt;Test&lt;/h2&gt;
              {response ? response : &quot;no hello world for you!&quot;}
          &lt;/div&gt;
      );
  }
  export default Hello;
  </code></pre>
  <p>This results in <code>no hello world for you!</code> being rendering the browser. In the console &quot;Hello World&quot; and I see a 200 in the network tab.
  However I get a warning about doing it this way.</p>
  <pre><code>ESLint: Assignments to the 'response' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect.(react-hooks/exhaustive-deps)
  </code></pre>
  <p>----- update 2 ------</p>
  <p>I got it to work with the help of the suggestions and playing around with it. Just not sure if it is the preferred way.</p>
  <pre><code>function Hello() {
      const api = new AppService()
      let response
      const [data, setData] = useState([]);
  
      useEffect(()=&gt; {
          response = async () =&gt; {
              response = await api.GetHelloWorld();
              setData(response)
          }
          response()
      },[])
  
      return (
          &lt;div className=&quot;App&quot;&gt;
              {data ? data : &quot;no hello world for you! :(&quot;}
          &lt;/div&gt;
      );
  }
  export default Hello;
  </code></pre>