useState with async function returning Promise {}

Question

So, I know this question has been asked 100's of times, but none of the solutions seems to work in my instance.

I am using useState hook to update state to a value initialValues that gets data returned from a getInitialValues function

const [initialValues, setInitialValues] = useState(getInitialValues());

The getInitialValues function does a logic check and either returns an object or another function retrieveDetails()

const getInitialValues = () => {
   let details;
   if(!addressDetails) {
      details = retrieveDetails();
   } else {
      details = { 
         ...,
         ...,
         ...
      };
   }
   return details;
}

The function, retrieveDetails is an async function that makes an API call, and I await the response and return the object received from the response.

const retrieveDetails = async () => {
   const addr = addressDetails[currentAddress];
   const { addressLookup } = addr;
   const key = process.env.API_KEY;
   const query = `?Key=${key}&Id=${addressLookup}`;
   const addrDetails = await new AddrService().getAddressDetails(query);
   return addrDetails;
}

However, when I log the state initialValues it returns Promise {<pending>}?

Even removing the API call and simple returning an object in it's place renders the same result.

Not sure the best way around this to actually return the object?

Any help would be greatly appreciated.

Answer 1

I don't think there is a way to get initial data to useState asynchronously, at least not yet.

React is not waiting for your data to arrive, the function will keep on running to completion while your async operation is queued (on the event loop side).

The current idiomatic way is to fetch the data in an effect and update the state.

useEffect(() => {
  getData(someParam).then(data => setState(data))
}, [someParam]) 

You can read more about it in the DOCS

Answer 2

So first things first: React is a library which is responsible for rendering DOM in any given time based on underlying state.

I assume that you will want to call your function getInitialValues() right after rendering your component, as a part of the logic of the component.

Then I would suggest to thing about this this way:

1. You start rendering your component
2. then component supposed to render some pending state of view
3. you trigger your async function getInitialValues()
4. once it finishes it's logic and get the result then you render finished state

so based on above logic I would suggest to do something like this:

import React, { useState, useEffect } from 'react'

function MyParentComponent() {

    const [state, setState] = useState(/* implicit undefined */);

    // trigger getInitialValues only on component init using useEffect
    useEffect(() => {
       (async function () {
           const data = await getInitialValues();
           
           setState(data);
       }())
    }, []); 

    // i got my stuff and I render it whatever it is
    if (state) {
        <pre>{JSON.stringify(state, null, 4)}</div>
    }

    // data still not arrived so let's render loader
    return <div>loading...</div>
}

Answer 3

Asynchronous function used to give the Promise which gives you the data only when it gets fulfilled until then it will show you pending state.

Suppose if you want to get the user one by one by their id and have to store them in the react array state, then chances are there that you might no get the data of all the users.

So for that you can use the Promise.all() function to achieve the desire result in the React useEffect and you will get complete resolved promise data in react useState. For Example -

const [userList, setUserList] = useState([]);

useEffect(() => {

  let userIds = [1, 2, 3];

  let userPromises = userIds.map(e => {
     return fetch('/api/get/user_by_id/'+e).then(response => {
        return response.json();
     })
  });

  Promise.all(userPromises).then((userDataList) =>{ 
    setUserList(userDataList)
  });

}, [])

Answer 4

This isn't something React's built-in hooks support.

You need to build or import a custom hook.

Want short and simple? Try this:

const addressDetails = useAsyncFunctionResult(retrieveDetails);

and add this in hooks/useAsyncFunctionResults.js

function useAsyncFunctionResult(asyncFunction, dependencies = []) {
  const [result, setResult] = React.useState();

  React.useEffect(() => {
    let mounted = true;
    asyncFunction().then((data) => mounted && setResult(data))
    return () => { mounted = false; }
  }, dependencies]);

  return result;
}

Here the retrieveDetails function (the one from the question) will start executing (the ().then bit above) when the hook is first called. The result is kept until unmount. And we get no errors about changing component state after unmounting.

If you later want to add caching, use existing hooks instead if making your own.

There's no official useAsync in React, and likely never will be, because if your Promise did a request and the requesting component did unmount before the promise resolves, then best practice is to cancel which differs case by case.

Answer 5

const retrieveDetails = async () => {
   const addr = addressDetails[currentAddress];
   const { addressLookup } = addr;
   const key = process.env.API_KEY;
   const query = `?Key=${key}&Id=${addressLookup}`;
   const addrDetails = await Promise.resolve(new AddrService().getAddressDetails(query))
   return addrDetails;
}


**try this once changed the function a bit**