title: react render called before componentdidmount
body: <p>In my componentDidMount() I am making an API call "invokeservice" to fetch some data, this call then sets a state object that I use in my render.</p>
  
  <p>The problem I am having is that the invokeservice is not being called and set the first time that the page is loaded, however when I refresh the page the invokeservice returns the data fine and the rest of the script will run. It's only the first time that it returns an null value.</p>
  
  <p>Is it possible to call this invoke service in render function and keep the data ready and display it when user tries to load this page. </p>
  
  <p>TRIED: 
  1.read that ComponentDidMount is called only after 1st initial render. 
  2. {this.invokeservice()} i tried to call in render function before return which did initial render but after 5sec it was blank and then again 5sec later it is filled again with values. </p>
  
  <p>render function</p>
  
  <pre><code>public render() {
      return (
          &lt;div className="monitor"&gt;
            &lt;div className="monitor__table"&gt;                   
              {this.monitorrow(translate("cpu"), this.state.cpuString)}
              {this.monitorrow(translate("memory"), this.state.pmemoryString)}
            &lt;/div&gt;
          &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>constructor</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = {
        cpu: 0,
        cpuString: ""
      };
      setInterval(() =&gt; this.invokeservice(), 5000);
    }
  </code></pre>
  
  <p>componentdidMount</p>
  
  <pre><code>  public componentDidMount() {
      this.invokeservice();
    }
  
  </code></pre>
  
  <p>invokeservice</p>
  
  <pre><code>private invokeservice() {
  
      var client = new HttpClient();
  
      var url = this.props.baseUrl + '//getMonitorUsage' + '?NC=' + Date.now().toString();
  
      client.get(url, (response) =&gt; {
          this.setState({
            cpu: JSONResponse.GetSystemStateResult.CPUusage
  
          });
        }
      }
      });
    }
  </code></pre>
  
  <p>function</p>
  
  <pre><code>monitorrow(left,right) {
      return (
        &lt;div className="table__row"&gt;
          &lt;div className="table__cell__left"&gt;
            &lt;Text&gt;{left}&lt;/Text&gt;
          &lt;/div&gt;
          { right &amp;&amp;
            (&lt;div className="table__cell__right"&gt;
              &lt;Text&gt;{right}&lt;/Text&gt;
            &lt;/div&gt;)
          }
        &lt;/div&gt;  
      );
    }
  </code></pre>