CODEWITHSUNDEEP
meteorreactjs
nupac
nupac

Reputation: 2489

Reactjs+Meteor with pub/sub for infinte scrolling

I am writing an application in Meteor with React. I am trying to achieve an infinite scroll feature.

What I am doing is subscribing to a publication with a limit which is tracked by my component's state. When the component detects that it has reached the bottom, it increments the limit in its state.

This triggers a re-render and a subscription to more data.

The issue I have is the whole component being re-rendered. It loses scroll position and takes you to the top.

How do I achieve infinite scroll with pub/sub based on the limit saved in state and only adding extra rows in the component instead of rendering the whole thing?

Subscribing to the whole list with no limits is not an option for me

Upvotes: 0

Views: 206

Answers (2)

nupac
nupac

Reputation: 2489

So, I couldn't find a way to do it with pub/sub so I had to use Meteor.call, that does a mongo's skip() and limit() based on a page to fetch data from the database and then save that data in the component's state.

This way it does not re-render the entire thing but only adds nodes for the new data it receives.

This also means there is none of the automatic socket stuff happening, which is fine for my use case.

One benefit I do get is it's easy to know whether there is more data left in the database to fetch. Surprisingly tricky with pub/sub unless you add a package.

Upvotes: 1

siwymilek
siwymilek

Reputation: 815

You have to store your data in some stack and enlarge it. React will render only new elements of your stack instead of re-rendering whole component.

Upvotes: 0

Related Questions