Nicely done.
We were able to generate our long list, so now we have.
All right.
And we would need to implement that in our UI where I would want to display only the first page.
And then, of course, eventually we'll set up the buttons that control which page are we displaying
and we're going to start in the use.
So in our custom hook, instead of passing in the whole data in my set there, of course, I'll pipe
through my patroni.
So some data and then we go with pad unit function and then we pass in there.
And I can tell right away that there's going to be a big fat error.
But just bear with me and we'll fix it together.
And technically not that bad.
We just have empty lots, OK, that we can live with.
All right.
Now, of course, let's navigate to our app Jazz and decide what is happening.
If I can still log the data, what should I see?
So I go here, I inspect, and of course I have the array zero and then I have Array 12.
Why?
Because now I have my array of arrays.
Correct.
But you can also notice that, of course, I'm not displaying the actual follower, I'm just displaying
that page and I would need to fix that.
And the way I'm going to fix that, I'm going to come up with two state failures.
One is going to be for the page.
So I'm going to go with page and then set page.
And then the second one is going to be the actual followers, the followers we're displaying, because,
of course, we're not going to be displaying the whole list.
We're going to go with use state here, initial viral up, because I would want to display page number
one.
And second thing is the actual followers that I'm displaying from that page.
So we're going to go with followers, so and then set followers.
OK, we have that one initial value for my followers is just going to be empty.
All right.
And now what I would want to do is set up a usufruct where on the app loads, then I would want to grab
a certain page out of my whole list.
So my whole list is data.
I'm already saying that by default I would want to display the first page and of course, our need to
set my followers, because if I'll change this around from data to followers, of course there's going
to be nothing on the screen because that is just a empty array and we set up use fact.
So we go here with usufruct and then we would want to run that one the app renders.
So we go for time being with just empty array and we go here with set followers and we have the whole
list and then whatever value we have for the page eventually will change dynamically.
But of course for the time being this is zero.
And once you say actually there's going to be an error, so let's save it and then let's see why we
have the error.
Well, we have the error because, of course, initially this data is just empty.
All right.
Correct.
So if this is empty.
Right.
And I'm saying, well, grab me the first item from the array of functionality doesn't work.
Correct.
So now, of course, I would want to check whether I'm loading and if I'm loading, then I don't want
to do that.
I only want to do that once I'm done with my pagination.
Correct.
So that's why I will go with if.
And then we're going to check for loading, and if that is the case, then I would want to return,
then I would want to return from my callback function and don't do anything.
And only when I actually have the data, then I would want to pattern it.
Well, now we're going to have another issue, because initially when the app launch, would you check
for loading?
Then we return and we don't set up those followers.
So remember the dependency.
Right now, I'm just going to say one loading changes, rerun my callback function and once we serve
notice, now I'm displaying that first list.
So let me go over one more time in the use patch instead of passing in the whole data we set up to pagination
bypassing the array of arrays in my data.
And that's what I'm getting back.
Of course, in my abcess I have the loading and I have the data.
And inside of the objets I set up two more state bars, one for the current page and follower's from
that front page, which at the moment is just this empty.
All right.
And then, of course, I iterate over those followers, which initially is just empty array.
And for every item in the list, display that follower component.
And that is good.
But of course, there has to be some kind of way where instead of rendering empty array, I display
the items from that certain page, which of course by default is zero, and that's where usufruct comes
into play.
But before we can set our followers, we need to check for loading because initially data is just empty
array.
So there is no item zero, item one or whatever.
That's why we were getting that error.
And that's why in the user, I say, if we're loading, then please return.
Don't do anything.
But then once I'm done loading that Sadr's followers to whatever page and of course you'll see that
if I change this to, for example, to them since arrays are zero.
And now, of course, we're displaying the third page.
And then eventually the problem was that if we don't set up our dependency array, meaning if we just
have it empty, then of course we check for loading initially and then we don't set those followers.
That's why I'm saying, hey, independency all let's add loading.
So that way when this loading changes, when it changes from true to false.
So when we have a data, when we have already pagination are the way, then rerun the callback function.
So in a callback function, of course, loading is not true anymore.
So this one we skip and then we said follower's equal to the page.
Hopefully we're all on the same page.
And of course we can start setting up the buttons that control which page actually are displaying.