title: useState with async function returning Promise {<pending>}
body: <p>So, I know this question has been asked 100's of times, but none of the solutions seems to work in my instance.</p>
  
  <p>I am using <code>useState</code> hook to update state to a value <code>initialValues</code> that gets data returned from a <code>getInitialValues</code> function</p>
  
  <pre><code>const [initialValues, setInitialValues] = useState(getInitialValues());
  </code></pre>
  
  <p>The <code>getInitialValues</code> function does a logic check and either returns an object or another function <code>retrieveDetails()</code></p>
  
  <pre><code>const getInitialValues = () =&gt; {
     let details;
     if(!addressDetails) {
        details = retrieveDetails();
     } else {
        details = { 
           ...,
           ...,
           ...
        };
     }
     return details;
  }
  </code></pre>
  
  <p>The function, <code>retrieveDetails</code> is an async function that makes an API call, and I await the response and return the object received from the response.</p>
  
  <pre><code>const retrieveDetails = async () =&gt; {
     const addr = addressDetails[currentAddress];
     const { addressLookup } = addr;
     const key = process.env.API_KEY;
     const query = `?Key=${key}&amp;Id=${addressLookup}`;
     const addrDetails = await new AddrService().getAddressDetails(query);
     return addrDetails;
  }
  </code></pre>
  
  <p>However, when I log the state <code>initialValues</code> it returns <code>Promise {&lt;pending&gt;}</code>?</p>
  
  <p>Even removing the API call and simple returning an object in it's place renders the same result.</p>
  
  <p>Not sure the best way around this to actually return the object?</p>
  
  <p>Any help would be greatly appreciated.</p>