React (TypeScript): infinite scroll

Recently I had to use an infinite scroll (lazy loading).  It took me a while to find a solution that worked well for my very simple case (lazy loading items in an infinite scroll fashion).  Hopefully this will save somebody time.

https://github.com/joshwnj/react-visibility-sensor ended up being by far the best solution that worked flawlessly  (and is extremely easy to use).  Just add it to the end of your scrollable list and lazy load once it becomes visible (p.s. you can move its position slightly upward to lazy load in a more eager manner):

<VisibilitySensor
    onChange={(isVisible) => isVisible ? this.loadMoreData() : console.log("debug: became invisible")}
/>

p.s. make sure to use arrow functions otherwise you might have some problem with this binding etc.; more details: https://github.com/Microsoft/TypeScript/wiki/’this’-in-TypeScript#fixes

to avoid small amount of polling; you might also wan to set the `active` property to false; when your component is no longer visible.

Finally react-visibility-sensor could be used for other purposes other than infinite scroll – that requires to know whether your component is visible or not.

 

Other Libraries

Most of the problems with other libraries were due them estimating weather the component is visible or not based on the position of the scroll bar.  Some did by requiring you to specify the height of each of the component.  In part this was motivated by many of the infinite scroll packages aiming at the case were the number of items would be very large 10K+ (and would only keep a small portion of visible items; to improve memory usage).  In my case I had under 1,000 items (with images etc); so these types of solutions were not necessary.  None of the libraries bellow worked well for me (the firing events were not reliable).

 

https://github.com/brigade/react-waypoint

https://brigade.engineering/to-infinity-and-beyond-with-react-waypoint-cb5ba46a9150#.faad1tmuk

Problem: didn’t update its position; so was stuck in the middle after more elements were added.

“`js

<Waypoint
onEnter={() => console.log(“waypoint: on enter” )}
onLeave={() => console.log(“waypoint: on leave”)}
onPositionChange={() => console.log(“waypoint: on onPositionChange”)}
/>
“`

https://github.com/CassetteRocks/react-infinite-scroller

PROBLEM: `loadMore` often doesn’t fire 🙁

needed to `useWindow={false}` in order to get `loadMore` to fire

`NodeView.tsx`

“`tsx
<InfiniteScroll
pageStart={0}
loadMore={() => console.log(“requested: loadMore ………………”)}
hasMore={true}
loader={<div className=”loader”>Loading …</div>}
useWindow={false}
>
{this.props.items.map(
(data) =>
<Item data={data} />
)}
</InfiniteScroll>
“`

Other Notes

list for react:
https://github.com/brillout/awesome-react-components#infinite-scroll

Many of the infinite scroll libraries are aimed at efficiently rendering 1K+ results; that is not the case for me; since I mostly just need paging/on-demand fetching; so don’t need to add virualization managing (which complicates things).


https://github.com/orgsync/react-list

a newer fork: https://github.com/CassetteRocks/react-infinite-scroller
original (not updated for 3 years) https://github.com/guillaumervls/react-infinite-scroll

https://github.com/jasonslyvia/react-lazyload

keywords: react simple non virtualized infinite scroll with page fetching loading lazy load

 

 

Other Notes

unrelated issue that I’ve experienced with http://www.material-ui.com/#/components/drawer is that having a property

height: window.innerHeight

would make the other component unresponsive/loose focus; removing that property fixed it.

 

 

 

About Neil Rubens

see http://ActiveIntelligence.org
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


*