#react router infinite scrolling

1 messages · Page 1 of 1 (latest)

cunning sable
#

I'm making an infinite scroll with react router and not sure got it should be implemented. I receive initial data from loader, then since it's not reactive, I use useState and set its state with initial data.
Then when using infinite scrolling there's fetcher which receives data into fetcher.data.
And finally useEffect in which state get replenished with new items after fetcher.data changes
When scrolling, I receive new data in batches like ?page=2, /?page=3

isn't it a bit convoluted? Is there a simpler way?

oak hill
#

That sounds like a pretty good solution to me. I used redux for an infinite scroll one time, and it was way more complicated than what you just described.

cunning sable
#

@oak hill I was thinking about somehow replacing all these containers: useLoader, useState, fetcher.data with just one which will get initial data and also receive new data but it seems impossible
thanks for the answer

oak hill
#

I'm not sure exactly what your code looks like but, you might be able to clean it up with a component that just had a data prop you can pass the data to would help, initialData in the first case when your other data isn't there and then the ?page=x data when it is there. You could also create an api route that just has a loader and/or action in it and a hook to interact with that api route, you can place all of your useFetcher and useEffect logic into that hook. That way the logic that determines the current scroll, when to load new data and gives back what the new data is, is hidden inside of a hook. The logic for how to load the data would be in it's own api route.

#

I highly recommend checking out the "react-use" library, there are a bunch of very good hooks in it for determining scroll position

mint cipher
#

There is an example in the hydrogen docs which does almost exactly the same, it just loads more products when the user presses a button instead of doing it automatically when you scroll to the bottom. Seems they have done it the way you describe, so I think you are on the right path 🙂
https://shopify.dev/docs/custom-storefronts/hydrogen/building/collection-page#step-8-pagination

Shopify
Build a Collection Page with Hydrogen

Build a page that shows a collection of products. Learn how to fetch data and render collections.

hearty mortar
#

Is there a good way to reset the fetcher if the request changes? I have a search page and I want to use this method, but when the search form updates I want to clear out any data from the fetcher. I know I can just create a component and reset it using a key but that seems so broken, I have to move hooks down into it that don't really make sense in it.

#

I wish I could do something like useFetcher(key) (I looked at the implementation, it's just an auto incremented id so passing in a key would work too) or if I could construct fetchers myself in something like useMemo

#

Or just a fetcher.reset() 🙂

mint cipher
#

Why do you need to reset the fetcher? Would it be an option to just not show result to user if state of fetcher is not idle?

hearty mortar
#

If the form changes then the fetcher should reset because the results would no longer be relevant

mint cipher
hearty mortar
#

I found the issue, it was a bug in remix