React: async/await function returns undefined then value I want

Question

I have this async function:

Which returns undefined on the first render and then the data from the fetch:

const [
  MessageListDataProvider,
  useMessageListData
] = constate(() => {
  const [messagePath, useMessagePath] = useState(api.UNRESOLVED_MESSAGES_PATH)
  const getMessagePath = (newPath) => {
    useMessagePath(newPath)
  }
  const [messages, setMessages] = useState({})

  const {
    value,
    loading,
    error,
    retry: refresh
  } = useAsyncRetry(async () => {
    if (!messages[messagePath] && !messages.links ) {
      return await api.fetchAllMessages(messagePath).then(async (data) => {
        const localData = await data
        let localMessages = { ...messages }
        localMessages = { ...localMessages, [messagePath] : localData.messages }
        localMessages = { ...localMessages, ['links'] : localData.links }
        console.log('localMessages', localMessages)
        return await localMessages
      })
    }
  }, [messagePath])
  
  console.log('value', value)

  return {
    getMessagePath,
    value,
    loading,
    error,
    refresh
  }
})

value undefined

MessageListView.jsx:23 value 23 undefined

MessageListDataProvider.js:34 value undefined

MessageListView.jsx:23 value 23 undefined

MessageListDataProvider.js:28 localMessages {/messages?status=Unresolved&limit=100&offset=0: Array(64), links: {…}}

MessageListDataProvider.js:34 value {/messages?status=Unresolved&limit=100&offset=0: Array(64), links: {…}}

MessageListView.jsx:23 value 23 {/messages?status=Unresolved&limit=100&offset=0: Array(64), links: {…}}

How can I prevent the return value from being undefined as it's causing me not to get any day in my <MessageListView /> component.

using `async/await` inside `.then` is usually a sign that you're doing it wrong — Bravo, Dec 29 '21 at 21:42
`const [messages, setMessages] = useState({})` makes no sense since you never call `setMessages`; `messages` will always be that empty object. — Bergi, Dec 29 '21 at 21:57
You use `await` in three places, in all of them it is unnecessary. You should use `await` to replace the `then` call! — Bergi, Dec 29 '21 at 21:57
@Bergi I am actually trying to have an object be a cache for two queries. If the `messagePath` key exist don't make the call because the key and value will be available already...If not make the `fetch` and add the key and value... — Antonio Pavicevac-Ortiz, Dec 29 '21 at 23:42
@AntonioPavicevac-Ortiz You should use a `useRef(new Map())` or `useRef({})` then, and you need to actually *modify* that cache somewhere. Or maybe just store the cache object in the module scope, so that it works across components? — Bergi, Dec 29 '21 at 23:45
Essentially I have a clickHandler on two buttons that makes there to make a request, but I'd rather have to have the data `[{...},{...}]` just be there rather than have to make a new request. — Antonio Pavicevac-Ortiz, Dec 29 '21 at 23:46
@Bergi Originally thought the answer was using `useMemo` like in this [question](https://stackoverflow.com/questions/70511219/how-to-use-usememo-and-usecallback-together-to-prevent-unnecessary-api-calls-bec) — Antonio Pavicevac-Ortiz, Dec 29 '21 at 23:49
@Bergi The state is coming from `api.fetchAllMessages(messagePath).then(async (data) => { const localData = await data let localMessages = { ...messages } localMessages = { ...localMessages, [messagePath] : localData.messages } localMessages = { ...localMessages, ['links'] : localData.links } console.log('localMessages', localMessages) return await localMessages })` — Antonio Pavicevac-Ortiz, Dec 29 '21 at 23:55
@AntonioPavicevac-Ortiz I think you meant to comment on your other question, where that code is crucially missing? — Bergi, Dec 30 '21 at 00:02
@Bergi Ah yes! My bad, the code in this post is the fetch which is creating the state for the other post. Like I said I’m trying just to make an object to cache the responses. Feels like a bad UI that the buttons keep making requests on those clicks… — Antonio Pavicevac-Ortiz, Dec 30 '21 at 00:44

score 2 · Answer 1 · answered Dec 29 '21 at 21:46

You need a loading state. Initiate state to loading, and then inside MessageListView, display a loader when the value is undefined. Or conditionally do not display MessageListView at all, but a loader instead when state is set to loading. Also you might want to wrap the async call into a react useEffect callback, as it's a side-effect.

score 1 · Answer 2 · answered Dec 29 '21 at 22:43

The async function will return undefined when its "if" statement fails - you should probably be handling that case better:

async () => {
    if (!messages[messagePath] && !messages.links ) {
        ...
    } else {
        return { /* something that's not undefined! */ }
    }
}

React: async/await function returns undefined then value I want

2 Answers2