Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
react-waypoint: As far as ready-made solutions go, this is a personal favorite of mine. The library is simple to use and you can implement infinite scroll with little more than a Waypoint component and an onEnter handler. With 4,000 stars on GitHub as of August 2022, react-waypoint is far and away the most popular of the libraries listed here, though it’s also a more general-use library than its counterparts.
react-infinite-scroll-hook: This is another library that stood out from the crowd. I haven’t personally used it, but it seems to be more actively maintained than react-infinite-scroll-component. On top of that, it happens to weigh in at a paltry 1.8 kB minified bundle size, according to bundlephobia, which appeals to the minimalist in me.
react-infinite-scroll-component: I found this seemingly popular component in the course of my research for this article. I haven’t used it myself and can’t vouch for it, but it kept popping up so I felt I should add it to this list. It’s worth noting that as of August 2022, this library has 114 open GitHub issues; compared against react-infinite-scroll-hook (2 open issues) and react-waypoint (54 open issues), that’s a relatively high number of problems and could be cause for concern.
In this article, we’ll look at a few libraries that can facilitate infinite scroll in React. In case that’s not your style, we’ll also dive into an infinite scroll example that leverages the Intersection Observer API and NextJS, touching on infinite scroll SSR (server-side rendering) tactics that can help with search engine optimization.