How to Code an Infinite Scroller with React Hooks

what's going on guys my name is sub optimal and today we're going to go over how to build infinite scroll with react hooks now if you've ever gone to youtube and searched for videos and you started scrolling down you'll notice that youtube starts auto populating more and more videos and this is a technique that you're going to want to use in your own websites as well now there are npm libraries that give you infinite scroll out of the box but today we're going to be building infinite scroll with just bare bones react and react hooks and the reason to really understand how this works is honestly because it could be an interview question i actually know someone who got this as an interview question while interviewing for a big tech company if they were applying to be a front-end engineer and they got this interview question so without any further ado let's get started now the first thing you want to do is to create the project so here i'm running npx create next app with tow in css and i'm titling the project infinite scroller once we've created the project we can cd into it see cd into infinite scroller and then run npm run dev so this is going to open up the project let's go to localhost 3000 and here you have it you've got the next project so all i'm going to do is remove all the unnecessary code so i'm going to go to the main section here and just remove all this unnecessary code right and let me just say hi here and then remove the footer as well because that's also unnecessary so as i refresh the page up you guys will see the high right there so the next thing we want to do is actually start loading some data so that we can create an infinite scroller right and i'm going to be for this project using the pokemon api and so that is the poke api which you can you know find over here and the main query that we're going to be running is um this one right over here where we're going to be able to gather a ton of different pokemon names at the same time so let me start working with that let me zoom this out a little bit just so it's a little bit cleaner and then we also turn this into a jsx file so that the editor is going to start giving us auto suggestions so if i start typing div you'll see it like that so now let's start by getting some basic pokemon data and displaying it on screen and of course to query data from any api we're going to want to use the axios library so let me cd into coding tutorials infinite scroller and here i'm going to run npm install axios and that's just the library that makes it really easy to query different apis we can just import axios from axios like so and let's just uh get some basic pokemon data so when this function is loaded we can do axios dot get and the query here is right over here pokemon api v2 and let's just get some basic data going so uh let me copy that and now as soon as that data is there we can actually console.log it because that's the best way to check that the data is actually there data so right now all we're doing is um querying the pokemon api with about 100 uh you know just 100 pokemon just to see what it looks like and this should appear in the console so what is going on here oh um dot get dot then is what i meant to write so once we get the data then we want to uh display it so let me save that and inside of the console here we should refresh the page and there you go we got a you know about a hundred results but again we don't need that many pokemon so let me just limit this to 10. let's just say we're going to display 10 pokemon and uh you know let's store this information obviously so const pokemon and then set pokemon equals use state import that from react automatically and this is going to be an array so once the data is there right let's take a look at this data we want to we're going to want to get the results and the name of the pokemon from the results right so it's data dot results dot and that's an array and we want the name for each pokemon from there so let's change this to be a uh let's create a const a new pokemon equals an empty array for now and we want to populate this with the results um that we are getting from the api and the results is an array so for each uh pokemon let's just call it p we're going to be able to get the name of the pokemon right so we're going to get the name of the pokemon and we're just going to add that to this new pokemon array new pokemon dot push p dot name and that is going to give us the pokemon in an array and of course the last thing we want to do is to update is to set the pokemon to be the new pokemon so what this is going to do is it's going to as soon as the component loads we're going to request the pokemon api for 10 separate pokemon and we're going to set that in our reactive variable now again this reactive variable is not being displayed here so let's just you know do a simple little for loop and display it so i'm going to say pokemon oops pokemon.map p and also i'm going to pass in the index as well as i so p is pokemon i is the index and let's just do let's return this and let's set the key to be i and let's just display the pokemon here um so i'm just going to display p so we're going to be replacing this high cool so we've got our initial 10 pokemon all right so now we've got pokemon data displayed on the screen the next thing we want to do is just add a little bit of styling so that we can actually trigger a scroll event such that we can load more data so let me style these components really quickly i'm going to go here and call this a class name and i'm going to give it a border and a padding so padding is going to be maybe 20 actually no not let's not do padding let's do flex and then let's do width and height so with 40 height 40 and let's also display the index so index plus one so this is the so bubble store which is the zero with index is the first pokemon so that's what i'm trying to display here and let me save that and see what i get cool so now we've got a little bit more styling and so now we also have a scroll bar here and basically once we get to the end we want to start loading more pokemon data so let's see how that's accomplished so i just finished up doing a couple more ui adjustments so it's clear to see what's going on here now i want to do a little bit of code cleanup and put this into a function because we're going to want to call this axios function once again once the user scrolls all the way to the bottom so how we're going to do that we're going to create a const load more pokemon function [Music] and this function is just going to set the axios information so we want to do is call this as soon as we load our component and we can do that using use effect right um and by specifying nothing over here what we're saying is when the component loads we want to run this function and the function that we want to run is called load more pokemon so now we are basically doing the same thing and if i were to refresh this browser you should see that now nothing has changed right i'm refreshing the browser and we're seeing the same information just did a little bit of refactoring the next thing we want to do is to add a window scroll listener and what this scroll listener is going to do is it's going to tell us when the user is scrolling and the best way to do that i'm going to open up the console here just so you guys can see as i debug what's going on so let's create a windows scroll event listener so we're going to say window dot add event listener and this is going to be the scroll event so when the user scroll what we want to do is handle the scroll so i'm going to create a handle scroll function so here i'm going to say handle scroll equals and for this for this purpose let's just do a console.log right console.log hi right all we're doing is when the user scrolls we're going to display a high as you can see as i'm scrolling you know we got our event listener working so what we want to do now is actually get the data right so when the user scrolls all the way to the bottom we want to determine when that happens and when that happens we want to load more pokemon so let's go back here and now i'm going to display the two pieces of the three pieces of information that we need to handle right the first is these uh the targets documents elements scroll top and then the height of the scroll so what are these two things as we refresh this page and we start scrolling right you see that the top height right now is eight so when i scroll down the top of this is gonna increase in height right it's gonna increase all the way until we get to the end where it's going to be 166 but that's not the height of the entire thing right that's not the height of this entire window so what we want is to add the scroll top with the actual height of whatever this window is and when those two added together are equal to 816 we know we've reached the bottom of the page so we have to get that final element and let me display it right over here um window and this is going to be the window dot i think it's height inner height so the window.inner height and you'll see what i mean as soon as we get here right so as i start scrolling you're going to notice that okay we're at the top um about like less than a pixel and on the window this whole window is about 650 pixels or in height i guess as you start scrolling down all the way to the bottom you're going to notice that the sum of the top of you know wherever we are in the scroll plus the height of the actual window is equal to 816. so basically we know we're at that we know we're at the bottom of the page when you know these two added together equal the scroll height so let's do a quick little check so if the windows inner height plus the the top of the scroll is let's say plus one is greater than or equal to the entire scroll height right then we can console.log at the bottom of the page right and the reason i'm doing this is because sometimes the sum of these is less is off by like about a pixel or so so i'm just gonna be adding one here um scroll all the way up and then clear the console so as i start scrolling down nothing is happening and as soon as i hit the bottom as soon as i hit the bottom there we go we're at the bottom of the page if i scroll a little bit up and then scroll more down cool we're at the bottom of the page so now we know when we're at the bottom of the page and when we're there we want to call the function to load more pokemon so now i'm sure you guys are sort of piecing these things together right we can delete this delete this and here we can just say load more pokemon now the interesting thing about this is that we are loading the same pokemon right we are loading the same pokemon so we need to update this function because right now load more pokemon is just going to load the same 10 pokemon that we had before so what we want to do is create an offset so let's say let offset equals zero right and we want to ensure that we load the next 10 pokemon right so i'm going to say that whenever we call this function whenever we call this function we're going to increase the offset by 10 and here what we can pass in is the offset itself so this is um a thing that you can pass into the pokemon api and here i'm just going to be passing in the offset so now if i get to the bottom of the page we're going to be setting it the new pokemon with the 10 new uh pokemon but you're going to realize that there's actually an error here and you'll see that really quickly when once i get to the bottom so let me refresh this page at the top and when i get to the bottom you're going to notice an error whoa wait what happened we're only showing 10 pokemon we're not showing all we're not adding to the previous 10 pokemon so that is the final area that we want to fix and let's fix that in the next section okay so we're at the top of the page and as soon as we scroll down what's happening is we're replacing our old pokemon with the new 10 pokemon and so we want to do is update is to store the old pokemon as well as include the new pokemon and so that is a pretty simple fix right inside of the accus query we are currently setting the pokemon to be the new 10 pokemon which is why we're only seeing 10 if we keep doing this right if i keep scrolling up and down you're gonna notice that these pokemon are getting updated right they are the next 10 pokemon but they are getting replaced with the previous 10 pokemon so let's go to our set pokemon react use date function and here what we can do is so we can get the old pokemon like so and what we can return is the old pokemon because again the old pokemon is an array right it's an array and we can also get the new pokemon and spread them out and turn that into an array this is a super simple fix and as soon as i save that right once i start scrolling down hit the bottom of the page we should see that more pokemon get loaded and there you got it an infinite scroller with react.js so yeah that's gonna be it for today hopefully you guys now understand how to build your own infinite scroller using react and react hooks if you enjoyed the video then consider leaving a like because that really does help me out and subscribe to the channel for more web development content just like this i also post on twitter so you can feel free to follow me over there thanks for watching and i'll catch you guys next time [Music]

Channel: Suboptimal Engineer

Views: 26,813

Keywords: suboptimal engineer, suboptimal software engineer, suboptimal, react.js, react js, react hooks, react infinite scroll, infinite scroll react, infinite scroll react hooks, react hooks infinite scroll, react infinite scroll api call, react infinite scroll tutorial, react coding tutorial, infinite scroll react js, react hooks tutorial, how to code infinite scrolling, react usestate, react useeffect, react hooks explained, react js infinite scroll, react js hooks, react tutorial

Id: DIiGIcOXKIc

Length: 17min 17sec (1037 seconds)

Published: Sat Oct 09 2021