In today's video, we're gonna create a react application that has infinite scrolling built into it.

And we're gonna actually use quite a few interesting features of react such as refs and creating our own custom hooks.

It's going to be a ton of fun, So let's get started now.

Welcome back to Webb.

Have simplified my name's Kyle, and my job is to simple by the Web for you.

So that sounds interesting.

Make sure you subscribe to my channel for more videos just like this one.

And to get started on the left hand side, I have visual studio code open, and all I did was run N p x, create react at with a period and this generated all of the bowler employees react code that we're going to need.

I then went around and removed all the files.

We don't need such a CSS files and such a CZ service workers and test files.

So we're just left with her index dot Js and an empty at file to actually put all of our react code inside of also on the right.

I have the finished version of our application.

All we do is search here for some form of book that we want.

This is going to query a book, a p I.

So we type and test, for example, and you can see we get a bunch of different results.

And when we get to the bottom of page, you see it says, loading right there and then it'll load in our results and you could just continually scroll down until we get to the very end of all of our results.

This is just infinitely scroll until there's no more books with the name test inside of their title.

Also, something this will do is if we scroll all way back to the top and do a different search.

For example, if you search for tea, you see, it'll reset our pagination so that we start all over with our infinite scroll again from the beginning, and it'll clear out all of our old search results for us.

So in order to get started, let's actually just create the basic JSX template for application.

And we could do that inside of our app here.

The first thing that we're going to have is we're gonna have an input component, so it's creative input is going to be a type of text and this is actually going to be here.

This input right here.

After that, we're going to return some other stuff.

So let's put this inside of fragments so we can return the multiple sets of HTML inside of our JSX.

That we go in here is where we're gonna put our books.

They're gonna be in a div.

Never gonna have the title was just copy that down a couple of times that we have an example of what this is going to look like.

And then lastly, we're going to have a div which is going to contain loading for when we're loading.

And if we have an error, we're gonna have a diff which is going to contain air.

So let's save that and actually start our application.

Just run NPM run, start.

And if we let that run for just a little bit, you see, it's going to start up over on the side here and there you go.

You can see that we have our boilerplate html being generated for us and that we can actually work on implementing the AP I and infinite scrolling inside of our application.

And to do that, we're going to use Axios to call or a P I.

So let's install access by typing in N.

P.

M.

I followed by access, and this one stalled the library access for us, which works a lot like the fetch library does.

But it's much easier to use rather than fetch, which can be a bit difficult to use and isn't supported in all browsers.

Now that we have that done, we could do all of our code inside of our app for rendering our books, actually querian them, using Axios and doing all that other stuff.

But with react and hooks, it's a lot easier to break out our logic into a custom hook.

So we're gonna create a custom hook called the Use Book search dot Js.

And inside of here we're gonna create a functional component.

And if you have the extension installed, which is called S seven React Redux graphic, you'll global boss snippets you could just type R F C and hit enter, and it'll generate all the boilerplate code for you for a function component in react, which is also the same boilerplate code for actually generating a custom hook.

We could just remove the JSX because we're not actually going to return JSX.

And we also no longer need to import react.

But we do want to import use effect just like that, which is going to be the hook that we're gonna be using inside of our custom hook because we want to call or a p I.

And that's enough side effect that we want to call every single time Some parameters change.

We also want to make sure that we have the used state hook because we're gonna be storing state inside of this custom hook, which we then expose outside of this custom hook by returning it down here in this return.

For now, we'll just return north and inside of this component.

What we need to do is query that a p I like I mentioned, but we need to take in a few parameters for what we're queen.

The first thing we want to take it is the query.

Essentially, whatever we type into this text box here, we want to send to our search.

We also want to send in here what page number were on because while we are doing infinite scrolling, the way that infinite strolling works is as soon as you get to the bottom of your list of results.

It'll query the next page of results from the A.

P I and dependent on to the bottom of our page.

So we need to know what page number were currently trying to get from the A P I.

And once we have those two pieces of information, we can actually set up access inside of an effect.

So we can just say, here, use effect.

This is going to take a function, which is what we're going to do every single time, that the parameters inside of this array, which is the second argument to use effect, change.

And in our case, we want this to happen every time our query or a page number change.

And inside of here we can use access to get our information.

What's first?

Import access from access.

We just want to say axis, and this is just a function which is going to take all the parameters that we need to give it.

So, for example, a method is going to be a get request.

We also need to give it a whirl.

I'm just gonna copy this euro from the a p I were using.

Essentially, this is the open library, a p I.

And we're using the search a p I that they have built in, which has pagination built into it so we can pass that as our parents.

So the first thing is our Cleary and in this case, they call that parameter cue in the a p I.

So we're gonna pass Q as query and we also need to pass page, which is just our page number variable.

And these are things you can find in the A P I documentation for this, a p I.

But for example, of q is our quarry and pages the page number that we're on inside of our quick, Also with Axios, this is going to be a promise based thing.

So we can just use dot Ben And this first stop then here is going to return us our response.

So we have a response variable, and then we can actually do something with that response.

And the data of our response is inside of rez dot data and this data we could just Consul, don't walk this for now.

And we'll take a look at what this looks like so we can actually understand what our data is doing.

So now, back inside of our app Lets import that hook so we can say import use.

Look, search.

We want to import that from hard dot slash used book search.

So now we actually have this hook inside of her application, and we can actually use this hook, for example.

We want to pass it our query, and we want to pass it our page number, which right now we don't have stored anywhere.

So we need to store these inside of ST.

So up here we can just import that used state hook, which will allow us to create some state.

And the first thing we can do is set up state for our query.

So we have query and set query.

We're gonna set this here equal to use state, and by default, our crews is gonna be an empty string.

And this use state function returns a query as well as a function to set that query which is going to be render application.

What's copy this down and do the same thing for a page number as well as for setting our page number.

And by default, we're just gonna have page number one for when we load her application.

Now, we actually have these variables being set.

We're not updating them anywhere.

The easy one to update is our query.

So we can just update that in our input, we can set a non change event to this.

And we could just saying here we want to call a function called handle search.

We can create that function just like this.

So say, handle search, and this is going to take the event.

And then it's going to actually do some stuff with that vent, which is going to be setting our query so we can say set, query.

And we want to set that to ee dot target dot value.

And this is just going to be the value of whatever is in the search box.

We also want to set our page number back toe one because every time we recre, we want our data results to start at the very first page.

We don't want them to start at page seven.

If we do a new query Now that that's all done.

Let's actually save this Inspector Paige over here and make sure this is working.

As we expect for going to the consul Zoom to send a little bit.

You can see that we first are getting an object for our buoyant result.

But if we query test, we should hear you see get a bunch of results.

And this is because we're not canceling our previous request.

So every character that we type is actually sending off a request because every character retyped causes this function to run which states are query, which then updates our search.

So we're gonna fix that in a little bit.

But what I do want to look at is the actual results.

We get returned.

As you can see, this data has a doc's field, which is all of the different books that were querying.

You can see it's a very long list, and inside here we also have the number of results found as well as the start.

So this is what page we're currently on.

So, for example, start zero, it's page one, and then whatever our pagination number is, which in this case I think is 100.

So start 100 would be page number two And this numb found is gonna be really useful for one we know went toe end are infinite scrolling.

But to get started, let's worry about this cancellation because we don't want to send a query every single time.

We want to cancel our old query if we're typing information.

So in a used book search here, Axios has a really easy way to set up cancellations.

It takes a parameter called cancel token, and this cancel token is equal to Axios lips.

Axios, Doc, cancel token.

And we want to create a new one of these.

This is actually capital cancel here and inside of this cancel token, it's just going to take a function and dysfunction takes a single parameter, which is going to be the cancel token.

And we want to set our own variable to that.

So it's creative variable called to cancel, and now we're going to be setting that variable cancel here to the sea from our cancel token.

Essentially, this is allowing us to cancel our request and what we can do inside of use effect is if you return something from use effect, you return a function, and then inside that function, we could just call cancel, and this is going to cancel a request every single time.

It recalls a used effect.

So now let's say that and we can start typing inside of here, and you can see that immediately.

We're getting uncaught promises, because every single time that we cancel something, it causes a heir to occur inside of our promise.

So it's actually catch that we can say inside of here, we want to catch our air, and what we want to do is we would have checked to see if this is an Axios cancellation error.

So luckily, inside access they have built in a really easy way to say is cancel.

We just pass it our air, and if so, we just want to return.

Essentially, we're saying ignore every single time that we can't still request because we've meant to cancel it.

Now if we say that and go over here and start typing, you'll see that only one request is made.

No matter how many characters we type, it's only gonna send that one single request, and it's not gonna send a bunch of extra request because it's actually canceling those forests, which is really great.

Also inside of this catch, we can return any errors we get so we can actually notify the user of Ares.

So now it starts setting up the state inside of our used book search.

So we can return this because right now this does nothing.

It's just returning no and logging to the consul.

But we actually want to return data to our user from this so we can set up our state and we're gonna have a few different things of state.

The first thing we're gonna have is loading, so we want a safer loading as well as a way to set loading.

And we can say use state.

And, of course, by default, we're gonna set our loading to true because the very first thing we're gonna do is load inside of our application.

Next, we're gonna set up a error as well was set there, and by default, we're not gonna have an error.

So we're just gonna set that to false?

The last two pieces of state is we're gonna have our state for our books.

This is pretty self explanatory.