Build Youtube in React 42: infinite scroll for trending videos
1 Overview
In the previous tutorial, we made our side bar
dynamic and our VideoPreview
component more flexible
.
We will now make use our changes and implement a component that shows trending
videos.
Click on the image to see it in high resolution.

2 Adding a Trending component
Now that we are done with the preparations, let’s create our Trending
component. This component will reach out to Youtube's
most popular videos endpoint
so it makes sense to put it into src/containers
.
- Create a new directory inside
src/containers
and call itTrending
- Add a
Trending.js
andTrending.scss
file in the directory you just created.
2.1. Adding markup for trending videos
Here’s how our trending component will work. We display our SideBar
element on the very left side. Next to it, we will display a list of VideoPreview
elements. The actual contents will go into the .trending div
.
The .trending div
is a grid container. We use a grid
container because then we can easily center
our elements horizontally
be setting justify-content: center
. Remember that we are using display: fixed
in our SideBar
element.
To not overlap with our side bar
, we add a margin
on the left that is equal to the width of the side bar
. We use the $sidebar-left-width
variable from our imported shared.scss
file for that.
The grid-row-gap
property adds a little bit of spacing between the VideoPreview
elements we are about to generate. We also set a padding-left
so that our trending videos component looks similar to the one on Youtube
. The trending
component is not really responsive yet. But we can do this later. Let’s first build it out. The top padding
is used to have a little bit of space between the header
and our component.
Besides our render
function
, we have a getVideoPreviews
function
. We expect to have a this.props.videos
array which contains all the elements we want to display. We map over the array and create a VideoPreview
element for each of them. Note that we are setting the expanded
flag to true
here to make use of the improvements we made in VideoPreview
earlier.
2.2. Pulling in most popular videos from Redux state
Our Trending
component is not yet connected to our Redux
store. We need to pull in the most popular videos. And we also need to fetch
them when the component is loaded.
You’ve seen this a thousand times by now. We create a mapStateToProps
and mapDispatchToProps
function
to pull the needed state and action creators in.
We pull in two things in from our global state. First, we pull in the most popular videos
with our getMostPopularVideos
selector
. Fortunately we can recycle this selector
from our Home feed
. Next, we also need to know if the Youtube client library
was already loaded. If not, we cannot reach out the the Youtube
endpoint and need to wait for it to load.
In addition, we also import
our most popular videos action creator and bind it to the fetchMostPopularVideos
.
2.3. Fetching most popular videos
Fetching the most popular videos is now a pice of cake. We just need to a little bit of logic in our componentDidMount
and componentDidUpdate
lifecycle functions.
When the component was mounted, we try to reach out to the endpoint. This will work if we already loaded the Youtube client library
. If this is not the case, we need to wait for the client library to load. Once it is loaded, componentDidUpdate
will be called. In case the library is now there, we reach out to the endpoint.
The fetchTrendingVideos
reaches out to the most popular videos
endpoint and fetches 20
elements and asks for their description as well.
2.4. Intermediary result
Navigate to localhost:3000/feed/trending
. You should see something like this:

That’s pretty nice, isn’t it. The only thing we’re still lacking is infinite scroll
.
2.5. Selectors for infinite scroll
Have a look at our most popular videos
action creator inside src/store/actions/videos.js
The request action creator accepts three parameters. We can pass it a next page token
and it will fetch more videos.
So in terms of network requests, we already have everything in place. But we somehow need the next page token
for the most popular videos inside our Trending
component.
Let’s create a selector
for this. Remember that we co-locate our selectors
with the respective reducer
. So head over to src/store/reducers/videos.js
and add the following selector
This selector
just grabs the mostPopular
object inside state.videos
and returns the nextPageToken
property.
Oh and there’s one more thing. If we load more videos, we want to display our spinner
. But how do we know if there are even more videos
available? We save the total amount of available trending videos inside our global state.
So all we need to do is to check how many videos we’ve loaded so far. If there are more videos available, we display the spinner
and just fetch them. Otherwise we don’t do anything.
So here’s a selector
to check if there are more trending videos available. Just put the following code under the other selector
in src/store/reducers/videos.js
.
2.6. Wiring up trending component with selectors
To make use of our selectors
, we first need to wire them up with our component. We do this mapStateToProps
.
We just import
the selectors
we just created and make use of them in our mapStateToProps
function. Nice, now we have all the needed data in our component.
2.7. Wiring up trending component with selectors
We can again recycle our InfiniteScroll
component that has served us well so far. All we need to do is to wrap the our .trending div
inside an InfiniteScroll
element.
The fetchMoreVideos
function dispatches the MOST_POPULAR_REQUEST
action and passes along our next page token. Like so, we make sure that we only fetch new videos. When we reach the bottom, we fetch twelve
new videos and insist that the endpoint returns us the video's
description
Our shouldShowLoader
function
returns
a boolean
that indicates if there are more trending videos available.
We make use of these two functions in our InfiniteScroll
component.
3 Wrap Up
Wow, that’s nice, we now have a trending component with infinite scroll
🤓.
How cool is that?

Now, there’s just one more thing we’ll do until we’re done with this tutorial series.
As always thanks for reading. You can find all the code on Github.
Follow @productioncoderPlease 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.
Recent Comments