WEBVTT 00:00:00.240 --> 00:00:01.940 Hi, everyone, and welcome back. 00:00:01.970 --> 00:00:04.400 Today, we're going to be exploring a very 00:00:04.430 --> 00:00:07.740 interesting topic, which is infinite scrolling. 00:00:07.770 --> 00:00:10.780 Let's understand what it is exactly. 00:00:10.810 --> 00:00:13.400 The concept of infinite scroll is widely 00:00:13.430 --> 00:00:18.540 used across many applications to create a seamless and fluid user experience. 00:00:18.560 --> 00:00:23.920 Instead of paginating through content by clicking on Next or a specific page 00:00:23.950 --> 00:00:30.160 button, infinite scroll automatically loads the next set of content as a user 00:00:30.190 --> 00:00:34.100 reaches the end or bottom of what's currently visible. 00:00:34.130 --> 00:00:40.220 This encourages prolonged engagement as new content appears seemingly endlessly. 00:00:40.240 --> 00:00:41.780 This is something that you might have 00:00:41.810 --> 00:00:47.020 experienced on Twitter, Facebook, Instagram, TikTok, and so on. 00:00:47.050 --> 00:00:50.820 Basically, you're scrolling through the content and it's endless 00:00:50.850 --> 00:00:55.300 because your friends might have posted a lot of items that day. 00:00:55.330 --> 00:01:00.640 Let's imagine a similar case right here where you are following a lot of users 00:01:00.670 --> 00:01:05.570 and you want to see their user stories and you begin to scroll through the items. 00:01:05.600 --> 00:01:07.320 What you want to happen is that once you 00:01:07.350 --> 00:01:10.850 reach the end, you want to load the next batch. 00:01:10.880 --> 00:01:16.930 Right now we only have nine user stories present, so it's definitely not endless. 00:01:16.960 --> 00:01:21.240 But what we want to imagine is that what if this was endless? 00:01:21.270 --> 00:01:23.720 What if there were thousands of user stories? 00:01:23.750 --> 00:01:25.380 How would you handle that case? 00:01:25.410 --> 00:01:27.320 Basically, what we're going to use is 00:01:27.350 --> 00:01:33.460 infinite scroll in this case, and we're going to make sure that we are 00:01:33.490 --> 00:01:38.320 paginating through the content when the user is scrolling. 00:01:38.350 --> 00:01:41.280 What we're going to say is that each load 00:01:41.310 --> 00:01:44.620 of user stories is going to contain four items. 00:01:44.650 --> 00:01:49.180 If the user sees these four items, we're going to load four more items. 00:01:49.210 --> 00:01:53.280 And if the user sees those four items, we're going to load the next four items. 00:01:53.280 --> 00:01:55.120 And for us, this is only going to happen 00:01:55.150 --> 00:01:58.160 three times because we only have nine elements. 00:01:58.190 --> 00:02:02.800 So the first things to do, as we understand, is we should decide how 00:02:02.830 --> 00:02:08.380 many items are we loading when the user is getting to the end of the content. 00:02:08.410 --> 00:02:10.610 And that for us, is going to be four. 00:02:10.640 --> 00:02:12.160 Let's just create a constant here 00:02:12.190 --> 00:02:18.020 and let's call it user stories page size and let's make it four. 00:02:18.050 --> 00:02:24.700 Then what we want to also do is understand how many times have we done this. 00:02:24.730 --> 00:02:27.610 Have we already fetched it one time? 00:02:27.640 --> 00:02:29.200 Have we done it the second time? 00:02:29.230 --> 00:02:31.340 Have we done it third time? Fourth time? 00:02:31.370 --> 00:02:33.580 We should keep track of this counter. 00:02:33.610 --> 00:02:36.320 How many times have we fetched this information? 00:02:36.350 --> 00:02:40.340 We're going to have to create a local state for that. 00:02:40.370 --> 00:02:44.880 Let's import use state here, and 00:02:45.840 --> 00:02:48.480 let's make sure that we set up some constant here. 00:02:48.510 --> 00:02:54.260 Let's call it, userStoriesFetchedCounter. 00:02:54.290 --> 00:02:59.300 We're actually going to need a setter for this as well. 00:02:59.330 --> 00:03:03.180 setUserStoriesFetchedCounter 00:03:03.210 --> 00:03:06.980 and initially, it's going to be one, right? 00:03:07.010 --> 00:03:10.020 Let's take one. 00:03:10.050 --> 00:03:12.580 We can even call it user stories current 00:03:12.610 --> 00:03:18.820 page because we're referring to it as pagination really under the hood. 00:03:18.850 --> 00:03:21.580 Let's call it user stories current page instead. 00:03:21.610 --> 00:03:24.100 I think that's going to be a better name. 00:03:24.130 --> 00:03:26.500 Then we also want to understand 00:03:26.530 --> 00:03:30.640 what is currently rendered, how many items are visible to the user right now? 00:03:30.670 --> 00:03:34.540 We're also going to need a constant for that and we're going to call it user 00:03:34.570 --> 00:03:45.180 stories rendered data and then set user stories rendered data 00:03:45.210 --> 00:03:48.660 here and it is going to be empty in the beginning. 00:03:48.690 --> 00:03:52.800 What we also might want to do is know when we're fetching the data. 00:03:52.830 --> 00:03:54.680 If we're in the process of fetching 00:03:54.710 --> 00:03:58.460 the data, if we're already loading the content for the user, 00:03:58.490 --> 00:04:02.060 we got to make sure that we don't request it multiple more times. 00:04:02.090 --> 00:04:03.880 We're going to do it one by one. 00:04:03.910 --> 00:04:08.040 If we're loading something, we have to know it if we're in the process of it. 00:04:08.070 --> 00:04:10.420 Let's create a constant for that as well, 00:04:10.450 --> 00:04:15.380 and let's call it, is loading user stories? 00:04:15.410 --> 00:04:19.320 Let's have a setter for this as well. 00:04:20.280 --> 00:04:21.380 Great. 00:04:21.410 --> 00:04:24.340 In the beginning, it's going to be false. 00:04:24.360 --> 00:04:27.020 Now we have everything that we need. 00:04:27.040 --> 00:04:32.820 But what we have to do is use this, user stories rendered data instead here so 00:04:32.840 --> 00:04:36.700 that the flat list understands what data should it render. 00:04:36.720 --> 00:04:39.700 Let's move this user stories rendered data 00:04:39.720 --> 00:04:43.460 right here and now we're going to see nothing. 00:04:43.480 --> 00:04:46.120 To make sure that we do something and show 00:04:46.150 --> 00:04:50.220 this data to the user, what we have to do is make sure that we 00:04:50.250 --> 00:04:58.180 set up a use effect here and that we say, okay, let's import use effect. 00:04:58.210 --> 00:04:59.860 We don't have it. 00:04:59.890 --> 00:05:01.720 I'll go back. Great. 00:05:01.720 --> 00:05:03.200 It's imported for me right now. 00:05:03.220 --> 00:05:05.620 This will run on the page load. 00:05:05.650 --> 00:05:12.380 When this runs, we have to make sure that the loading is set to true. 00:05:12.410 --> 00:05:14.760 We're going to use set is loading user 00:05:14.780 --> 00:05:17.980 stories to true because we're about to load the user stories. 00:05:18.010 --> 00:05:23.100 When we're done with it, we have to make sure that this is set to false. 00:05:23.120 --> 00:05:26.320 Now what we want to do is create a function that is actually going 00:05:26.340 --> 00:05:31.180 to populate the data inside the user stories rendered and data. 00:05:31.210 --> 00:05:35.080 For that, we're going to create a function and call it pagination. 00:05:35.100 --> 00:05:40.460 What it's going to do is it's going to take the whole database of the users. 00:05:40.480 --> 00:05:44.500 In that case, we're taking in the user stories given here. 00:05:44.530 --> 00:05:47.060 Then we're also going to need to know 00:05:47.090 --> 00:05:51.260 which part of the database are we fetching, which page are we on? 00:05:51.290 --> 00:05:53.600 Are we trying to fetch the first four items? 00:05:53.630 --> 00:05:56.480 Are we trying to fetch the second four items? 00:05:56.510 --> 00:05:59.100 Are we trying to fetch the third four items? 00:05:59.120 --> 00:06:00.920 We're going to know which page we're on, 00:06:00.950 --> 00:06:03.620 and I'm just going to call this current page. 00:06:03.650 --> 00:06:07.780 Then we also got to know how many items we have to fetch each time. 00:06:07.800 --> 00:06:11.540 Let's call this page size. Great. 00:06:11.570 --> 00:06:16.200 Now we have the information that we are going to need inside the pagination 00:06:16.230 --> 00:06:21.360 arguments and what we have to think about is how we retrieve this information. 00:06:21.390 --> 00:06:23.100 We have to understand 00:06:23.130 --> 00:06:28.640 where do we want to start getting the four items from the database. 00:06:28.670 --> 00:06:32.220 The first time we fetch it, we want it to be index zero. 00:06:32.250 --> 00:06:35.340 The second time we fetch it, we want it to be index four. 00:06:35.360 --> 00:06:38.900 The third time we fetch it, we want it to be index eight. 00:06:38.920 --> 00:06:44.740 Therefore, what we have to come up is a formula of the starting index. 00:06:44.770 --> 00:06:47.280 Let's come up with that formula and say 00:06:47.300 --> 00:06:55.700 that it is the current page minus 1 times page size. 00:06:55.730 --> 00:07:00.780 What this will do is if the page is 1, then it's going to return to zero. 00:07:00.800 --> 00:07:03.060 If the current page is 2 and we're 00:07:03.090 --> 00:07:07.860 fetching the data for the second time, the data is going to be 4. 00:07:07.890 --> 00:07:10.100 The starting index is going to be 4. 00:07:10.130 --> 00:07:12.860 The third time we fetch it is going to be 8. 00:07:12.890 --> 00:07:15.220 This is correct and it's going to work. 00:07:15.250 --> 00:07:19.040 Now what we want to do is understand what the ending index should be. 00:07:19.070 --> 00:07:21.500 Ending index should definitely be 00:07:21.530 --> 00:07:27.080 start index plus the page size because we are going to know that we are starting 00:07:27.100 --> 00:07:30.500 at zero and we're going to know that we're ending at four. 00:07:30.530 --> 00:07:32.640 The function that we're going to use is 00:07:32.670 --> 00:07:37.420 actually going to exclude the last element, which is going to be end index. 00:07:37.450 --> 00:07:39.300 This is going to work just fine. 00:07:39.330 --> 00:07:42.100 What we have to make sure of is that if 00:07:42.130 --> 00:07:49.100 start index is already equal to or greater than the database length, 00:07:49.120 --> 00:07:53.120 then there's going to be nothing in our database that we can return because start 00:07:53.150 --> 00:07:57.540 index already exceeds what we have in the database. 00:07:57.570 --> 00:08:00.780 In that case, we're just not going to return any elements. 00:08:00.800 --> 00:08:03.360 But in another case, what we're going to do is grab 00:08:03.390 --> 00:08:07.420 the database and use a JavaScript function called slice. 00:08:07.450 --> 00:08:09.760 The slice function takes in the starting 00:08:09.790 --> 00:08:17.960 index, and it's going to cut your array at the starting index and end it some time. 00:08:17.980 --> 00:08:23.440 If you don't say what is the end index, then it is just going to grab all 00:08:23.470 --> 00:08:25.880 the elements starting from the starting index. 00:08:25.880 --> 00:08:27.140 If you give it the end index, 00:08:27.170 --> 00:08:32.580 then what it's going to do is grab the elements until that index. 00:08:32.610 --> 00:08:35.460 This is the pagination function that we're going to use. 00:08:35.490 --> 00:08:39.240 Now, we want to get the initial data on load. 00:08:39.270 --> 00:08:41.560 We're going to get a constant here 00:08:41.580 --> 00:08:45.700 and we're going to say that on page load, get initial data. 00:08:45.730 --> 00:08:47.920 What it's going to do is call this 00:08:47.940 --> 00:08:53.020 pagination function, give it the user stories as the database. 00:08:53.050 --> 00:08:57.840 The current page is going to be one because it's the initial load and the page 00:08:57.870 --> 00:09:02.700 size is going to be user stories page size. 00:09:02.720 --> 00:09:04.840 Great. Now that we have this, 00:09:04.870 --> 00:09:11.740 we're going to use this initial data and set user stories rendered data to this. 00:09:11.770 --> 00:09:18.380 Let's set user stories rendered data to get initial data. 00:09:18.410 --> 00:09:23.340 If we save this, we're going to see the four items present right here. 00:09:23.370 --> 00:09:25.900 Now, what we also want to do is as users 00:09:25.930 --> 00:09:29.380 scrolls, we want to add more elements, but now nothing is happening. 00:09:29.410 --> 00:09:31.500 Let's agree on something like this. 00:09:31.530 --> 00:09:36.500 If the user has the half of the items visible on their 00:09:36.530 --> 00:09:42.400 screen already, what we want to do is make sure that we load other items. 00:09:42.430 --> 00:09:45.220 If they scroll through the items and they 00:09:45.250 --> 00:09:50.920 see half of the items already present, potentially they would want to see more. 00:09:50.940 --> 00:09:54.900 Let's not wait exactly when they get to the very end. 00:09:54.930 --> 00:09:58.820 Let's start fetching once they see half of the content. 00:09:58.850 --> 00:10:01.360 What that means is that if we have four 00:10:01.390 --> 00:10:06.900 elements, if we see the first two, then we're going to fetch the second four. 00:10:06.930 --> 00:10:09.900 Then if we see the first four, 00:10:09.920 --> 00:10:13.280 we're going to fetch one more time and then we're going to have potentially 00:10:13.310 --> 00:10:19.000 12 elements and what's going to happen at that point is if we see and scroll 00:10:19.030 --> 00:10:22.680 through the six items, then we're going to fetch four more items. 00:10:22.700 --> 00:10:26.760 But we only have nine elements, so this is only going to happen three times. 00:10:26.790 --> 00:10:30.700 And once we have the nine elements, we don't have anything else to fetch. 00:10:30.730 --> 00:10:34.100 To set up this percentage exactly 00:10:34.130 --> 00:10:40.460 of the half point being the end of our scrollable flat list here, 00:10:40.490 --> 00:10:45.140 what we can use is a property called on and reach threshold. 00:10:45.170 --> 00:10:49.220 And if you give it 0.5, it will stand for 50%. 00:10:49.250 --> 00:10:54.480 Once you start scrolling through the items and you have the first two items visible, 00:10:54.510 --> 00:10:59.580 but you got to do this scroll first, then you already are going to reach the end. 00:10:59.610 --> 00:11:02.760 So we got to do some action when that happens. 00:11:02.790 --> 00:11:08.320 The flatlist also offers an event of on and reached and it takes 00:11:08.330 --> 00:11:11.780 in the callback function and you can do anything inside this function. 00:11:11.810 --> 00:11:14.380 What we're going to do is grab more items. 00:11:14.410 --> 00:11:17.500 But before we do that, I just want to console log here. 00:11:17.530 --> 00:11:24.220 We have reached the end to show you how this works. 00:11:24.250 --> 00:11:26.820 Let's open our terminal, reload the application. 00:11:26.850 --> 00:11:31.580 If I start scrolling and half of the items are visible, I reached the end, okay? 00:11:31.610 --> 00:11:33.960 Right now, half of the items were visible. 00:11:33.990 --> 00:11:35.300 I started scrolling. 00:11:35.320 --> 00:11:37.360 Therefore, it thinks that we reached the end. 00:11:37.390 --> 00:11:40.500 At that point, we got to add four more items. 00:11:40.530 --> 00:11:42.100 Let's do that. 00:11:42.130 --> 00:11:46.000 Here first, we're going to check if we're already loading user stories, 00:11:46.000 --> 00:11:48.820 then we don't want to do anything, so we're just going to return. 00:11:48.850 --> 00:11:52.380 Because we should first wait for the ongoing loading process. 00:11:52.410 --> 00:11:55.320 Then we're going to prepare for fetching. 00:11:55.350 --> 00:11:59.780 We're going to have to say that these loading stories is set to true. 00:11:59.810 --> 00:12:02.020 Then what we're going to do is 00:12:02.050 --> 00:12:08.180 call this Pagination function and get the data content to append. 00:12:08.210 --> 00:12:11.260 Let's call it like that and say that we're 00:12:11.290 --> 00:12:15.740 grabbing this Pagination function and let's give it the 00:12:15.770 --> 00:12:19.640 user stories database and the current page will be the next page. 00:12:19.670 --> 00:12:23.820 We want to fetch the content of the next page. 00:12:23.850 --> 00:12:27.540 We're going to say that this is current page plus one. 00:12:27.570 --> 00:12:32.060 Actually, the current page is called as user stories current page. 00:12:32.080 --> 00:12:35.060 Then we want to give it the user stories 00:12:35.080 --> 00:12:38.860 page size to understand how many items it's fetching for the first time. 00:12:38.890 --> 00:12:44.040 Then we're going to check if content to append actually is more than zero, 00:12:44.070 --> 00:12:49.860 so if it contains any data, then we know that our current page changed 00:12:49.890 --> 00:12:53.260 because we already fetched the data and the next time we fetch it, 00:12:53.290 --> 00:12:56.480 we should know that we're fetching it for the third time. 00:12:56.510 --> 00:12:59.180 What we want to do is make sure that we 00:12:59.210 --> 00:13:06.740 set userStoriesCurrent page to userStoriesCurrent page plus one. 00:13:06.770 --> 00:13:14.500 Now what we want to do is grab the already existing data inside the rendered data. 00:13:14.530 --> 00:13:15.620 Let's do that. 00:13:15.650 --> 00:13:19.420 Let's set user stories rendered data to 00:13:19.450 --> 00:13:27.120 previous data plus the content to append. 00:13:28.040 --> 00:13:29.740 Great. Once we do that, 00:13:29.770 --> 00:13:35.660 we have to make sure that set is loading, user stories is set back to false. 00:13:35.690 --> 00:13:38.700 Let's save this and start scrolling. 00:13:38.730 --> 00:13:44.360 Let me reload this application 00:13:44.880 --> 00:13:50.420 and start scrolling and we have more data, but we have some problem here. 00:13:50.450 --> 00:13:52.540 Let's see what problem we have. 00:13:52.570 --> 00:13:55.820 I forgot to add three dots here. 00:13:55.850 --> 00:14:00.780 It also said that encounters two children with the same key. 00:14:00.810 --> 00:14:05.620 Here, let's just make sure that we give the user story its own unique key. 00:14:05.650 --> 00:14:09.140 We do have its ID in the database and they are unique. 00:14:09.170 --> 00:14:15.540 Let's just say here that he is the item ID. 00:14:15.560 --> 00:14:16.500 Great. 00:14:16.530 --> 00:14:20.440 Actually, let's say that this is for user story. 00:14:21.640 --> 00:14:24.720 Then what we want to do is reload the application one more time. 00:14:24.750 --> 00:14:29.280 If we're going to start to scroll, we're going to see that new items are 00:14:29.310 --> 00:14:32.340 added and last time item is going to be Adam. 00:14:32.370 --> 00:14:34.860 This function actually works. 00:14:34.890 --> 00:14:37.740 Now, I do want to see if there is any 00:14:37.770 --> 00:14:41.660 weird behavior if we were to edit our code. 00:14:41.690 --> 00:14:45.580 Let's say we edited our code here and said 00:14:45.610 --> 00:14:52.620 that we want to see what the current page is every time we start to scroll. 00:14:52.650 --> 00:14:55.260 Let's reload our application. 00:14:55.290 --> 00:14:59.360 What's going to happen is that when we start scrolling, the current page will 00:14:59.390 --> 00:15:03.300 become two because the content got appended already. 00:15:03.330 --> 00:15:07.940 Then if we scroll through four more items, boom, 00:15:07.970 --> 00:15:11.980 we see that current page is three already and all of the items have been fetched. 00:15:12.010 --> 00:15:14.860 It will attempt to fetch the fourth item, 00:15:14.890 --> 00:15:19.240 but it's actually not going to work because there's going to be no items 00:15:19.270 --> 00:15:22.800 and this if statement will make it return an empty array. 00:15:22.830 --> 00:15:25.540 We can just delete this. 00:15:25.570 --> 00:15:28.160 Here we see that our data changed and this 00:15:28.190 --> 00:15:31.300 is the weird behavior I was trying to look at. 00:15:31.330 --> 00:15:36.640 What I want to explain here is that the use state is a local state here 00:15:36.670 --> 00:15:41.680 and it gets updated as we're scrolling and as we're making code changes. 00:15:41.710 --> 00:15:45.040 If I reload this 00:15:45.480 --> 00:15:51.120 and scroll through these items, and if I change this function again 00:15:51.150 --> 00:15:55.120 and save it, we're going to see that the data is grabbed 00:15:55.150 --> 00:15:58.780 again and it is grabbing the first four items. 00:15:58.810 --> 00:16:03.780 But the thing here is that this is not really going to happen in production 00:16:03.810 --> 00:16:06.820 because nobody's going to be changing the code. 00:16:06.850 --> 00:16:09.060 Nobody's going to be changing the code 00:16:09.080 --> 00:16:13.960 exactly at the same time while user is viewing the application. 00:16:13.990 --> 00:16:15.820 The code deployment system works 00:16:15.850 --> 00:16:19.740 differently, so this is not something that you're going to see in production. 00:16:19.770 --> 00:16:22.700 This is no issue, really. 00:16:22.720 --> 00:16:24.620 If something like this happens to you, 00:16:24.650 --> 00:16:28.360 just make sure that once you edit the code, you save this and reload 00:16:28.390 --> 00:16:31.500 the application again and and you will be all set. 00:16:31.530 --> 00:16:35.100 If you do have any questions or are confused about the setup, 00:16:35.130 --> 00:16:39.460 please definitely reach out in the Q&A section or directly to me in the messages. 00:16:39.490 --> 00:16:42.180 I'm pretty responsive, so I will respond to you. 00:16:42.200 --> 00:16:45.520 Thank you so much for watching this video, and I'll see you in the next one.