Reading other people’s code: Infinity Scroll demo


So I was working through a random project using react and trying to get infinity scroll working. I have an idea for a new website/project I want to work on so it’s a feature that I could feel would be useful at some point. I googled and eventually came across this framework.

According to their documentation, this is how to use it:

<InfiniteScroll
    pageStart={0}
    loadMore={loadFunc}
    hasMore={true || false}
    loader={<div className="loader">Loading ...</div>}
>
    {items} // <-- This is the content you want to load 
</InfiniteScroll>
So of course I just copy and paste that into my react app, and nothing works haha. I try to read through the documentation, but seriously there’s nothing more. I run the app and it says loadFunc not defined, so I guess that meant I need to make that, but I had no idea how this code worked. I didn’t understand what I needed, and how this function should be crafted.
Initially, I just gave up and tried to find another framework I could use that had more documentation. After looking around for a an hour or two, I tried to go back to the original one. This time, I looked at the demo, and saw that they had some source code too.
I spent like an hour just staring and reading the code, and it didn’t really get me anywhere at first. I think I just felt overwhelmed with everything and still had no idea how an infinite scroller actually worked.
I took another step back, and decided to just start writing out the same code piece by piece. I already was using the random user api and had an idea of what info I wanted from that to use in my infinite scroller test. I went through and just rewrote each section of the code to match what I wanted. Taking it in small pieces like that made it much easier to understand and after about half an hour, I had a working infinite scroller. And I came to understand that infinite scrollers require data to be sent in chunks and have pointers to the next batch of data. This pagination is helpful as I think about my next large project and how I want to structure the database and what not. So if you get stuck trying to read other’s people code. Maybe just start typing it out? That level of scrutiny forced me to really take a second and think about what each piece was doing.
You can check out my scroller demo here!