Custom infinite loading functionality issues?
Unanswered
Kawakawa posted this in #help-forum
KawakawaOP
Hi, might be going mad and my React knowledge might be dying in my brain - but if e.g. I need to (in a custom hook) set a loading state in a data fetching useEffect (DF logic is in an async callback inside the effect) - how can I get around the obvious fact of that calling a setState dispatcher puts that call in a queue - so therefore isn't an instant thing?
As currently, due to React's (obvious) nature - the loading state only goes to true after the data is fetched - and then it does the other call to make it false almost instantly, so it's no use 😂
Use case FYI for this is an infinite scrolling custom hook which fetches the data, but I'm using URQL and the backend is a GQL one using a different pagination technique than just simply using the "pages" field on the returned data - so I can't use already-made libraries, or stuff like useInfiniteQuery from react-query...
As currently, due to React's (obvious) nature - the loading state only goes to true after the data is fetched - and then it does the other call to make it false almost instantly, so it's no use 😂
Use case FYI for this is an infinite scrolling custom hook which fetches the data, but I'm using URQL and the backend is a GQL one using a different pagination technique than just simply using the "pages" field on the returned data - so I can't use already-made libraries, or stuff like useInfiniteQuery from react-query...
36 Replies
Asian black bear
If the data fetching is async, the effect function should yield just fine and set the state?
Why not put the queue in a state?
Also why do you need to load another data while the prefetched data is being loaded? What makes it diffferent than traditional infinite scrolling?
@aardani Also why do you need to load another data while the prefetched data is being loaded? What makes it diffferent than traditional infinite scrolling?
KawakawaOP
Well it’s not done with one paginated query, it’s done by first doing an initial fetch which then gets a scroll ID which you then pass to the subsequent fetching GQL query
KawakawaOP
Uses elastic search scroll api for pagination
Asian black bear
Put that outside of the async function
remember that defining/running an async function returns immediately with a promise
KawakawaOP
So where line 61 is basically?
Asian black bear
or between 37-38
KawakawaOP
I tried that before and it didn’t work 🤔
Same thing happening
It is because the state hook is delayed, because when you call the dispatcher function, it is added to a queue – which is intended react behaviour.
Asian black bear
@Kawakawa So where line 61 is basically?
Asian black bear
also no, because that is dependent on a condition that has nothing to do with the fetch. More like 59
@Asian black bear also no, because that is dependent on a condition that has nothing to do with the fetch. More like 59
KawakawaOP
Yeah putting it there doesn't help.
Asian black bear
put it outside of the if
KawakawaOP
But then that makes 0 sense
Asian black bear
it was outside of the if when you had it in the async function
KawakawaOP
Why would more data be loading if the user isn't at the bottom
Asian black bear
why does it makes sense to put it there now?
Asian black bear
ohhh
KawakawaOP
Asian black bear
I thought it was an iife
KawakawaOP
Nahh 😂
Asian black bear
nonetheless, check out the code sandbox
because the error in your code is probably not this
KawakawaOP
🤔
Yeah what it works in that sandbox??
What could stop mine working then do you think?
Interesting
Asian black bear
you could try your code with the time waster function instead of your async function
or even await it inside of the async function to give you a little extra time to track where/when the state changes elsewhere
Otherwise, maybe debugging backward from what you expect to happen to see if maybe the signal is getting lost somewhere else.