How to fetch multiple times in single hook?

It seems that I can’t fetch multiple APIs in a single hooks and use arrays to return values.

Code Sandbox: https://codesandbox.io/s/ykly7w7w9x

Say I have components which need to fetch data with several APIs, I would like to abstract the hook into a single useMultipleFetch. But the problem is state would not update after fetching finished. I must manually update the state by resize the window to force states update.

expected :

Fetch result (expected 3 `done`)
["done","done","done"]
isLoadings result (expected all `false`)
[false,false,false]

but got:

Fetch result (expected 3 `done`)
["","",""]
isLoadings result (expected all `false`)
[true,true,true]

for the first time.

BTW use a single fetch hook would avoid this problem, so I guess it could be that React can’t handle state as a nested array.

Is this the wrong way I use it and is it not supported by React hooks? Or is there any other thing wrong?

[RexSkz]

The problem is in useMultipleFetch.js (which is like redux’s states are equal), it can be solved by using the following codes in then:

setIsLoadings([...isLoadings]);
setResults([...results]);

BTW, if the results and isLoadings is really changed, there’ll be an infinite loop in your code, because the changes will cause re-render and then fetch/change data again.

[RexSkz]

@shafiemukhre

I guess you’d like to execute the callback in useEffect only once (like the componentDidMount in class component). In this case, // eslint-disable-line react-hooks/exhaustive-deps seems ok for me, because the comment will remind me that “this callback won’t be executed again, useConversation is not a reactive function”.

If you’d like to make useConversation reactive to ids (like componentDidMount+componentDidUpdate in class component), just keep this code, and check the outer code which calls useConversation, make sure the ids wont’ be changed after useConversation. A possible way is: do not use [names, dates, times] to calculate the new ids, just keep them in your component and use them in JSX, ids should be changed only in necessary.

P.S. To avoid performance issue, using batch API such as fetch(url, { params: ids }), then call setNames, setDates, setTimes only once after fetch. Operator ... has O(N) time complexity, if you execute N times, it’ll cost O(N^2), which means if you have 30 items in ids, you’ll get about 30*30*3/2=1350 temp items.