Hi, everyone, and welcome back.
Today, we're going to be exploring a very
interesting topic, which is infinite scrolling.
Let's understand what it is exactly.
The concept of infinite scroll is widely
used across many applications to create a seamless and fluid user experience.
Instead of paginating through content by clicking on Next or a specific page
button, infinite scroll automatically loads the next set of content as a user
reaches the end or bottom of what's currently visible.
This encourages prolonged engagement as new content appears seemingly endlessly.
This is something that you might have
experienced on Twitter, Facebook, Instagram, TikTok, and so on.
Basically, you're scrolling through the content and it's endless
because your friends might have posted a lot of items that day.
Let's imagine a similar case right here where you are following a lot of users
and you want to see their user stories and you begin to scroll through the items.
What you want to happen is that once you
reach the end, you want to load the next batch.
Right now we only have nine user stories present, so it's definitely not endless.
But what we want to imagine is that what if this was endless?
What if there were thousands of user stories?
How would you handle that case?
Basically, what we're going to use is
infinite scroll in this case, and we're going to make sure that we are
paginating through the content when the user is scrolling.
What we're going to say is that each load
of user stories is going to contain four items.
If the user sees these four items, we're going to load four more items.
And if the user sees those four items, we're going to load the next four items.
And for us, this is only going to happen
three times because we only have nine elements.
So the first things to do, as we understand, is we should decide how
many items are we loading when the user is getting to the end of the content.
And that for us, is going to be four.
Let's just create a constant here
and let's call it user stories page size and let's make it four.
Then what we want to also do is understand how many times have we done this.
Have we already fetched it one time?
Have we done it the second time?
Have we done it third time? Fourth time?
We should keep track of this counter.
How many times have we fetched this information?
We're going to have to create a local state for that.
Let's import use state here, and
let's make sure that we set up some constant here.
Let's call it, userStoriesFetchedCounter.
We're actually going to need a setter for this as well.
setUserStoriesFetchedCounter
and initially, it's going to be one, right?
Let's take one.
We can even call it user stories current
page because we're referring to it as pagination really under the hood.
Let's call it user stories current page instead.
I think that's going to be a better name.
Then we also want to understand
what is currently rendered, how many items are visible to the user right now?
We're also going to need a constant for that and we're going to call it user
stories rendered data and then set user stories rendered data
here and it is going to be empty in the beginning.
What we also might want to do is know when we're fetching the data.
If we're in the process of fetching
the data, if we're already loading the content for the user,
we got to make sure that we don't request it multiple more times.
We're going to do it one by one.
If we're loading something, we have to know it if we're in the process of it.
Let's create a constant for that as well,
and let's call it, is loading user stories?
Let's have a setter for this as well.
Great.
In the beginning, it's going to be false.
Now we have everything that we need.
But what we have to do is use this, user stories rendered data instead here so
that the flat list understands what data should it render.
Let's move this user stories rendered data
right here and now we're going to see nothing.
To make sure that we do something and show
this data to the user, what we have to do is make sure that we
set up a use effect here and that we say, okay, let's import use effect.
We don't have it.
I'll go back. Great.
It's imported for me right now.
This will run on the page load.
When this runs, we have to make sure that the loading is set to true.
We're going to use set is loading user
stories to true because we're about to load the user stories.
When we're done with it, we have to make sure that this is set to false.
Now what we want to do is create a function that is actually going
to populate the data inside the user stories rendered and data.
For that, we're going to create a function and call it pagination.
What it's going to do is it's going to take the whole database of the users.
In that case, we're taking in the user stories given here.
Then we're also going to need to know
which part of the database are we fetching, which page are we on?
Are we trying to fetch the first four items?
Are we trying to fetch the second four items?
Are we trying to fetch the third four items?
We're going to know which page we're on,
and I'm just going to call this current page.
Then we also got to know how many items we have to fetch each time.
Let's call this page size. Great.
Now we have the information that we are going to need inside the pagination
arguments and what we have to think about is how we retrieve this information.
We have to understand
where do we want to start getting the four items from the database.
The first time we fetch it, we want it to be index zero.
The second time we fetch it, we want it to be index four.
The third time we fetch it, we want it to be index eight.
Therefore, what we have to come up is a formula of the starting index.
Let's come up with that formula and say
that it is the current page minus 1 times page size.
What this will do is if the page is 1, then it's going to return to zero.
If the current page is 2 and we're
fetching the data for the second time, the data is going to be 4.
The starting index is going to be 4.
The third time we fetch it is going to be 8.
This is correct and it's going to work.
Now what we want to do is understand what the ending index should be.
Ending index should definitely be
start index plus the page size because we are going to know that we are starting
at zero and we're going to know that we're ending at four.
The function that we're going to use is
actually going to exclude the last element, which is going to be end index.
This is going to work just fine.
What we have to make sure of is that if
start index is already equal to or greater than the database length,
then there's going to be nothing in our database that we can return because start
index already exceeds what we have in the database.
In that case, we're just not going to return any elements.
But in another case, what we're going to do is grab
the database and use a JavaScript function called slice.
The slice function takes in the starting
index, and it's going to cut your array at the starting index and end it some time.
If you don't say what is the end index, then it is just going to grab all
the elements starting from the starting index.
If you give it the end index,
then what it's going to do is grab the elements until that index.
This is the pagination function that we're going to use.
Now, we want to get the initial data on load.
We're going to get a constant here
and we're going to say that on page load, get initial data.
What it's going to do is call this
pagination function, give it the user stories as the database.
The current page is going to be one because it's the initial load and the page
size is going to be user stories page size.
Great. Now that we have this,
we're going to use this initial data and set user stories rendered data to this.
Let's set user stories rendered data to get initial data.
If we save this, we're going to see the four items present right here.
Now, what we also want to do is as users
scrolls, we want to add more elements, but now nothing is happening.
Let's agree on something like this.
If the user has the half of the items visible on their
screen already, what we want to do is make sure that we load other items.
If they scroll through the items and they
see half of the items already present, potentially they would want to see more.
Let's not wait exactly when they get to the very end.
Let's start fetching once they see half of the content.
What that means is that if we have four
elements, if we see the first two, then we're going to fetch the second four.
Then if we see the first four,
we're going to fetch one more time and then we're going to have potentially
12 elements and what's going to happen at that point is if we see and scroll
through the six items, then we're going to fetch four more items.
But we only have nine elements, so this is only going to happen three times.
And once we have the nine elements, we don't have anything else to fetch.
To set up this percentage exactly
of the half point being the end of our scrollable flat list here,
what we can use is a property called on and reach threshold.
And if you give it 0.5, it will stand for 50%.
Once you start scrolling through the items and you have the first two items visible,
but you got to do this scroll first, then you already are going to reach the end.
So we got to do some action when that happens.
The flatlist also offers an event of on and reached and it takes
in the callback function and you can do anything inside this function.
What we're going to do is grab more items.
But before we do that, I just want to console log here.
We have reached the end to show you how this works.
Let's open our terminal, reload the application.
If I start scrolling and half of the items are visible, I reached the end, okay?
Right now, half of the items were visible.
I started scrolling.
Therefore, it thinks that we reached the end.
At that point, we got to add four more items.
Let's do that.
Here first, we're going to check if we're already loading user stories,
then we don't want to do anything, so we're just going to return.
Because we should first wait for the ongoing loading process.
Then we're going to prepare for fetching.
We're going to have to say that these loading stories is set to true.
Then what we're going to do is
call this Pagination function and get the data content to append.
Let's call it like that and say that we're
grabbing this Pagination function and let's give it the
user stories database and the current page will be the next page.
We want to fetch the content of the next page.
We're going to say that this is current page plus one.
Actually, the current page is called as user stories current page.
Then we want to give it the user stories
page size to understand how many items it's fetching for the first time.
Then we're going to check if content to append actually is more than zero,
so if it contains any data, then we know that our current page changed
because we already fetched the data and the next time we fetch it,
we should know that we're fetching it for the third time.
What we want to do is make sure that we
set userStoriesCurrent page to userStoriesCurrent page plus one.
Now what we want to do is grab the already existing data inside the rendered data.
Let's do that.
Let's set user stories rendered data to
previous data plus the content to append.
Great. Once we do that,
we have to make sure that set is loading, user stories is set back to false.
Let's save this and start scrolling.
Let me reload this application
and start scrolling and we have more data, but we have some problem here.
Let's see what problem we have.
I forgot to add three dots here.
It also said that encounters two children with the same key.
Here, let's just make sure that we give the user story its own unique key.
We do have its ID in the database and they are unique.
Let's just say here that he is the item ID.
Great.
Actually, let's say that this is for user story.
Then what we want to do is reload the application one more time.
If we're going to start to scroll, we're going to see that new items are
added and last time item is going to be Adam.
This function actually works.
Now, I do want to see if there is any
weird behavior if we were to edit our code.
Let's say we edited our code here and said
that we want to see what the current page is every time we start to scroll.
Let's reload our application.
What's going to happen is that when we start scrolling, the current page will
become two because the content got appended already.
Then if we scroll through four more items, boom,
we see that current page is three already and all of the items have been fetched.
It will attempt to fetch the fourth item,
but it's actually not going to work because there's going to be no items
and this if statement will make it return an empty array.
We can just delete this.
Here we see that our data changed and this
is the weird behavior I was trying to look at.
What I want to explain here is that the use state is a local state here
and it gets updated as we're scrolling and as we're making code changes.
If I reload this
and scroll through these items, and if I change this function again
and save it, we're going to see that the data is grabbed
again and it is grabbing the first four items.
But the thing here is that this is not really going to happen in production
because nobody's going to be changing the code.
Nobody's going to be changing the code
exactly at the same time while user is viewing the application.
The code deployment system works
differently, so this is not something that you're going to see in production.
This is no issue, really.
If something like this happens to you,
just make sure that once you edit the code, you save this and reload
the application again and and you will be all set.
If you do have any questions or are confused about the setup,
please definitely reach out in the Q&A section or directly to me in the messages.
I'm pretty responsive, so I will respond to you.
Thank you so much for watching this video, and I'll see you in the next one.