Build Youtube in React 31: Infinite Scroll in Home feed
In the last tutorial we created the
reducer and the
selector for displaying the most popular videos for a certain category.
We now need to wire up all the logic with our components.
2 Populating Home feed
2.1. Wiring up Home component
We need to wire up our
Home component with the video categories and some action creators.
We got quite a few changes here. First of all we pull the
category ids into our component in our
mapStateToProps function. We use the
selector to accomplish this. In addition, we also update our
mapDispatchToProps function to pull in the action creators we need.
2.2. Fetching more data in Home feed
We also need to make a few changes to the
Home component itself.
Have a look at the constructor and the
fetchVideosByCategory function. You probably noticed that we introduce a new local state variable in our constructor called
categoryIndex. This variable helps us to remember for which video categories we already fetched some data. In each network request, we fetch videos for exactly
three video categories . So at the beginning, our
categoryIndex variable is
0. This means that we will grab the first
category ids from our array and load the respective trending videos.
However after that, we need to remember that we already fetched some data for the first three categories. We’re keeping track of that in the
categoryIndex variable. We don’t want to do work twice, do we?
category ids, dispatches the the action to fetch the most popular videos for these three
category ids and updates the component’s state.
Note that it is sufficient to call this
componentDidUpdate. To fetch the trending videos for a particular category, we need to have the
video categories first. Once our global state is updated with the video categories,
componentDidUpdate is called. Therefore, it makes no sense to call it in
componentDidMount because by then we haven’t loaded the
video categories yet.
2.3 Verifying our logic
Head over to your project and check the
Redux Dev tools extension. You should see that our data fetching logic was successful.
byCategory object inside videos now contains three key-value pairs.
Click on the image to see it in high resolution.
2.4 Most popular videos in HomeContent
So far so good. Our Home component fetches the needed data. That’s nice. But the HomeContent component is actually responsible for rendering the correct elements to the screen.
First of all, we need to pull in new data from our global state.
We we can add a new
function to create the video grids dynamically.
We added a new
getVideoGridForCategories. In here we loop over the
category ids from
this.props.videosByCategory and create a
VideoGrid component for each category. We also do a little bit of styling by preventing the last video grid from showing a grey divider at its bottom.
Finally, we need to update our markup in the
Run it and feel the magic 🧙🏻♂️.
2.5 Intermediary result
Oh wow, look at this. Click on the image to see it in high resolution.
This is really nice. We have some
Home feed like experience. The only thing we still need is some sort of infinite scroll.
3 Implementing infinite scroll in React
To get the Youtube-like
Home feed feeling we need to implement infinite scroll. Now that sound harder than it actually is.
3.1. Installing React Waypoint
One of the easiest ways to create an infinite scroll-like feeling is to use a package called react-waypoint.
By using this package, we don’t have to mess around with attaching
scroll listeners to our
3.2. InfiniteScroll component
Since we will have infinite scroll at at various locations in our app, we will create an own component for it.
This component is not connected to our
Redux state and and therefore we put it into
- Create a new directory inside
src/componentsand name it
- Add an
InfiniteScroll.scssin the directory you just created.
The component itself is pretty straight-forward. At first, it is rendering all the children that live inside of it. After that it renders a
Waypoint object which we get from our
react-waypoint package. The
Waypoint component accepts an
onEnter callback as soon the element is part of the visible viewport. We want the user to know that we are currently loading data. Therefore we display a
Loader (spinner) which we take from Semantic UI.
InfiniteScroll component accepts two
props. It needs a
function which is invoked once the user hits the waypoint. It also needs a
boolean flag that indicates whether the spinner should be shown or hidden. We don’t want to show the loader all the time after all.
3.3. Updating HomeContent
We only want to scroll the part of our
Home feed which contains the videos. Remember that
Home component also contains the sidebar and delegates the display of the video grids to our
HomeContent component. Therefore, we just need to wrap the entire content of
HomeContent inside an
The only thing we did was to the
video grids we are displaying into our
InfiniteScroll component. Note that
HomeContent is just responsible for laying out the video grids, but not for fetching data. Once we hit the bottom of the page, we want fetch more data. Since our
Home component is responsible for all the data fetching logic, we will need some logic there as well
3.4. Getting Home component ready for infinite scroll
Before we can implement the infinite scroll in
Home, we need two more
First of all, we need to know whether the categories have already been loaded. If not, we cannot fetch more data..
Second, we only want to show the
spinner when we have already loaded some videos. In addition, we only want to show the
spinner when we are actually loading more data and not on the initial fetch.
Therefore, we just create two new
true, if we have some entries in our
The second selector returns
true if we have some entries in our
videos.byCategory object, i.e. if we already loaded some videos for a specific category.
3.5. Implementing infinite scroll in home feed
Finally, we are about to write our very last piece of code for the
First, we pull in the two
selectors into our state by using it in the
function we call when the user scrolled to the bottom of the page is dead simple. We just call
Fortunately we kept track for what categories we already fetched some data…
What a coincidence 🤓.
We display the loader if we the video categories have already been loaded and if there’s more data. This is the reason why we stored the total amount of results in our state.
4 Wrap Up
Yes, yes, yes 😁
We are done with the
Home feed. We now have infinite scroll. Once you scroll to the bottom, we refetch more videos.
Click on the image to see it in high resolution.
How cool is that?
In the next tutorials, we will take actual
Watch component and make its content dynamic.
As always, you can find all the code on Github.Follow @productioncoder
Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.
If you are interested in more high-quality production-ready content, please enter your email below.