In this video, I'm going to show you how to correctly use the URL query parameters as state in React, because sometimes you want your state to be persistent. You want your state to persist perhaps when you're reloading the page, or even if you're sending the URL to somebody else for them to see, you want to also send along the state with it. Now, before we get into that, there's two things that I want to mention.
And the first one is that if you want to learn how to build a real project with React, a project that's big and complex and has a lot of moving parts, definitely check out Project React in the description. I promise you, you will not regret it. The second thing is that I've also recently launched a newsletter that's all about React.
It's called Import React. And honestly, I love the name, it's completely free. And you get it delivered to your inbox every single week, you're also going to be able to find it in the description.
Cool. With those things being mentioned, let's now look and see how we can actually put things and use the URL as state in React. Alright, cool, let's begin.
So this is the application that we have and that we're going to be working with in this video. This is actually the same application that I did in the video where I showed how to create a custom filter component, which is this component over here, the search the category and the max price, right? So we can actually search or we can do something like product, this is going to work and it's going to search.
But now the problem is if I refresh this, we lost that state, this text input here has no value, we lost that state. Even worse, if we tried to send this URL to somebody and we wanted to also send our search query, this will be lost because nothing is stored in the URL. So in this video, we're going to fix this is the code that's running this application, I will briefly go over it because I did build this in a previous video.
But essentially, we have the app component over here. And we have a couple of state variables here, we have one state for the search one for the category and one for the max price, right? Simple enough.
Then we're taking those values, and we're passing all of them to react query, we're passing them here in the query key so that we have our caching working as we expect. And we're also passing them here to the fetch products function. And the fetch products function is going to take those values and return to us the products that actually match.
And then over here, we have the JSX that's actually running this entire application, it is pretty simple. And we have the product list filters component, which takes in an onChange function, it calls it with the filters. And here, we're just taking those filters and putting them in the state of this app component.
And then the product list filters component has the same state variables over here, it receives the onChange function. And we basically have a use effect over here, whenever any of these values changes, we're actually changing and calling the onChange function with these values. And then we have some JSX over here that just has everything that we need to actually render the UI for this filter component.
So now what we're going to do is we're going to take this code, refactor it, put all of this code inside of the URL instead and make this hopefully a little bit better. But before we do that, I just want to take a very quick moment to talk about brilliant, which is the sponsor of this week's video. So brilliant, just like what we're doing here in this video is a place where you learn by doing you have 1000s of interactive lessons in various topics such as math, data analytics, AI, and more importantly, for us programming brilliant has a platform that is designed to be uniquely effective.
Each lesson that you have on there, you get to solve using a hands on approach that lets you play and get a feel for all the different concepts, which actually has been proven to be a method six times more effective than watching traditional lecture videos. Plus, all of the content on brilliant is crafted by an award winning team of researchers and professionals from places such as MIT, Microsoft, Google, and more brilliant actually helps you build your critical thinking skills through problem solving instead of memorizing. So while you're building real knowledge on specific topics, you're also learning how to become a better thinker.
And you can do all of that on brilliant with literally just a couple of minutes a day, you have fun lessons that you can do whenever you have the time. It's the opposite of mindless scrolling. And it actually builds a great habit.
And if you want a recommendation for a great course, check out thinking in code, which follows what we're doing in this video and teaches you solid foundations for computer science, which is going to directly help you as a react developer. To try everything that brilliant has to offer for free for a full 30 days, visit brilliant. org slash cause and solutions or click the link in the description.
You're also going to get 20% off an annual premium subscription. Thank you once again to brilliant for sponsoring this video. And now we can get back and start refactoring and start using the URL as state and react.
So to be able to do this in react and to put everything in the URL efficiently and have this work really beautifully, we're going to need to use a library that is all about routing. In this example, we're using if I just open up the main. tsx, we are using react water, which is a standard, it's a very popular library for routing in react applications.
So here we're creating our router, and then we're doing all of the traditional setup codes to actually put everything through a router. And this is going to give us access to some handy hooks that allows us to modify the URL, which we can use to actually put things in there. Now the first thing that we're going to want to do is we're going to want to take all of this state and have this come from the URL instead of just be simple state.
And the second thing that we want to do is we actually want to get rid of duplicate state. Because we have this state here, we have the search category and max price. But we also have it here in the app component, literally the same state variables.
And we have this unnecessary on change function, which honestly, we don't need to this code isn't as efficient, even though I wrote it, right, that's okay. That's part of being a developer, we're going to now improve this and make this a little bit better. And the best way to do that is actually to create a custom hook and then put all of these state variables in here and then create a function to update them and then use that hook use that custom hook in both places or in any place that we need to have the same filters for the products.
So let's do that. So I'm going to come here in the sidebar, I'm going to go inside of my hooks folder, and I'm going to create a new file. And we're going to call this one use product filters dot ts.
In here, I'm going to define a function export function use product filters. And we have the function over here. Now in here, because we are using React router, right, that's the reason why we're using this, we're going to use one hook that React router provides us, which is going to allow us to easily access the search parameters of the URL.
And that is going to be the use search params hook. So we're going to do const search arms, set search arms, and that is going to be equal to use search params. And we're going to import this from React router.
This has a very similar syntax to use effect, this is the actual value of the search parameters. And this is the function that we can use to actually set any search parameter value, right, it's pretty simple, it's straightforward. And we get access to this because we are using React router, then what we want to do is we want to get and create variables for each of our state properties, right.
So that is going to be the search the category and the max price. So we're going to come here and make a new line. And we're going to have those come from the search parameters.
So we're going to do const search equals search params dot get, which is a function that we can call, then in here, we're going to pass search like this, right, this is going to be our key, which is going to be stored in the URL. And then what we want to do is we actually want to get the correct value, the correct type of this search, we're going to alias this as the type that we have here product filters, this comes from our products on API, these filters over here, I want to use those as our state variables to get the same types and the same functionality that we had previously. So what we can do is we can do as product filters and import them from API slash product.
And I believe here, we're going to have to pass search like this. There we go, we have our search done. After that, we're going to want to do exactly the same thing for the category.
So we're going to do const category equals search params dot get category. And we're also going to alias this as product filters. And we're going to pass your category like so the actual type of product filters category is this string literal over here, it can be first, second or third.
And for the search, it is going to be a string. And all of these are optional. So actually, this works because the search params dot get can also return a null value, which fits with the optional type that we have here.
So that's great. And then we just need to do our max price. So we're going to do const max price equals search params dot get max price.
And here, we're going to have to do is because max price is a number, but inside of the URL, everything is a string, we're going to have to actually convert this to an actual number. And to do that, we need to first check if we actually have search parameters max price. So I'm going to do question mark over here.
And then if we have it, we're going to do parse int. And then we're going to do search params dot get and then max price. And then here, otherwise, we're going to return on defined to match with our actual state.
And here, yes, we need to alias this as a string. I know it's not really efficient. But because it doesn't know that we actually have the value over here, I'm just going to alias this as a string, we could also do a little bit more fancy code to actually make this work.
But for the purposes of this throw video, this is perfectly fine. So now we have search, we have category, we have max price. And these are the same values that we had previously in our actual state variables.
But now they're coming directly from the URL. So we're no longer using state from react, we're just using the search parameters over here from your search params from react router, which is coming from the URL. So that's great.
We're one step closer to refactoring this component. Then once we have our values, we actually need to also use set search parameters, which means that we need a function to be able to update these values inside of the URL. And for that, we just need one function that accepts all of these properties.
And based off of those, we'll actually just set them and update them in the state. Let's do it. So I'm going to come here and I'm going to create const set filters.
And that is going to be and here I'm going to do something that I always do. And this is a good pattern to do in your react applications, I'm going to use use callback like this. And I'm going to do this as a function that uses use callback with no dependency array.
The reason I'm doing this is because we're going to be returning this function from our actual hook to be used in any component in the productless filters component in the app component, or anywhere else. And the thing is, whenever you're creating a custom hook, and you have a function here that you're returning, you want to always put use callback because you cannot control where that function is being used in other components. And if you have another component, for example, the productless filters wants to use this set filters function and put it inside of a use effect, which is a valid use case that they might have, they would have to wrap it inside of use callback.
So we don't want to have them do that, right, we want to do it instead ourselves as the owners of the custom hook. Right, and do that extra step for whoever else is going to be using it. This is also what third party libraries do.
So remember to keep it simple. If you're creating a function inside of a custom hook to be reusable, always wrap it in useCallback to prevent anyone else from having to actually do it in other places. And in here, this function is going to take in the filters.
And that is going to be product filters like this. So that's simple enough. And then based on these filters, we're actually going to do some code.
And what I'm going to do here just to save a little bit of time, I'm just going to take some code that I already have to make things a little bit simpler. So I'm going to come here and take this code and just paste it here and walk you through what this actually does. So this uses the setSearchParameters function that we got from useSearchParams.
This one receives the actual parameters that are currently in the URL. And then based off of those, we can actually do things to it. So here we're checking the search if we have filters.
search, if it's equal, if it's not equal to undefined, because we also want to account for an empty string, we're setting params. search to filters. search.
And then we're doing the same thing with the category and the same thing with the max price. And finally, we're returning the final parameters. So that's it, that's all that we need to do for the setFilters function.
And then the last thing for us to do inside of this custom hook is to just return all of these values over here. So we're going to come here and we're going to do return. And we're going to return search, we're going to return category, we're going to return max price, and we're going to return set filters to be able to use these in different components.
So now that we have this custom hook, everything else is pretty simple, because all of the functionality is inside of this custom hook, which we can just use. So we can come here to the app component, we can actually get rid of all of these state variables here, we don't need them. And we can just do const search, category, max price equals use product filters.
And we can just call it directly. And that's it, this component, we have no other functionality, we get the same variables over here, we're passing them to react query in exactly the same way. And we're fine, right.
And now what we just need to do is actually remove this on change here, because we no longer need it, we no longer need an on change inside of this component to pass it to our product filters component. So we can just remove it and save this. And now that's it, we're going to have an error here, because our type still expects an on change, we're going to fix that in just a moment, this actually made our component a little bit simpler, we did a little bit of refactoring, and our code is actually cleaner, which is a good thing, then we can come in here to our product, this filters component, and we can do exactly the same exact thing.
But before we do that, I just want you to keep in mind and remember that we have this debounce search over here, which basically just delays the updating of the search until after the user has finished typing. And it's this debounce search that we're using inside of the use effect over here. So just remember that before we refactor.
So like we did before, we're going to take all of this code, we're going to remove it, and we're just going to do const search, category, and then max price. And we're going to make this equal to use product filters exactly in the same way. And now we actually no longer need this use effect, because we no longer need to call this on change function.
So this is redundant, we can just remove this altogether, great. And now we can actually remove the on change here from the actual props, we even don't even need props in this component anymore, because we have nothing to pass. So let's just remove that.
And now our product list filters component is also simpler. So not the only thing that we have to do is just to fix this part over here, the actual changing of the values. But that's super simple to do, because we also have a set filters function that we can use.
So in here, what we can do instead of set search, we can do set filters. And instead of passing a target that value, we can just pass search, and then a target that value. That's it simple, we're done, let's do the same thing over here, set filters, and then take all of this, and then category, and then paste this, and we're done, we can move on, set filters, take all of this, and this is going to be the max price.
And we're just going to set those like this. And we are done. So already with this code, we are pretty much done.
And we have the same functionality, but now everything is being driven from the URL. So let's see how this works. So here we have our app, it looks exactly the same.
But now if I type something here, like product, we get to see that inside of the search variable over here inside of the URL, actually, we have search equals product, that's great. This works exactly as we expect. If I said a category, for example, second over here, we also get category second, if I set a max price, like 500, we also get 500.
And our products are still being filtered correctly. What's even better is now if I refresh this page, we get our state persisted product persist, the category persist, the max price persist. And if we were to take this URL, send it to someone else, they would see exactly the same screen with the same filters.
And this is efficient. This is why you want to use the URL as state and react for things like this, because it makes sense, you're persistent, you can reload, and you can send this to other people. And the code that we use to actually make this work was super simple.
And it was just one custom hook to actually get this working. This is great. Now there's one more thing that we have to fix in here, because we actually have reduced functionality, as opposed to how it was before.
And that has to do with this use the bounce over here. Remember the debunk search, I told you to remember that we have to deal with this. Because now if you go to our application, you see here, we have product, every time that I change anything on the input, we're instantly showing a search a loading over here, right?
If I just reload, every time I type something, right, as I type every single keystroke, we're actually sending a fetch request to the back end. And that's bad, we actually want to delay this. And that's why we had to use the bounce before.
But now we no longer have it. So we need to reintroduce it. Now to do that, to reintroduce it, I'm going to show you a pattern that I like to use in a lot of my react projects, what we're going to do is we're going to come here, we're going to create a state variable, call it const, local search, and then set local search, that is going to be equal to use state, we're going to reintroduce you state in this actual component, we're also going to give it here product filters, and we're going to give it here the search.
And we're going to do what happened, let's go back, we're going to close this over here. And we're going to default this to undefined like this, this is the first step, this is going to be the local search the search that is only local and will only change within this product filters component, it is never going to make it to the actual URL, then inside of our input over here, instead of setting the filters directly, we actually want to revert to what we had before. And we want to set the local search instead.
So we're going to do set local search instead. And we're going to put it back to exactly how it was before. There's a reason we're doing this.
And it's because we want to have this functionality of listening to the delayed update of our actual search. And then we're going to have to replace the search over here with the local search like this. Now what's going to happen with this component is this is only locally going to update, it's no longer going to trigger the filters themselves.
And it's no longer going to trigger actually refetching the data. So if I go back here, and I actually look at it, now when I change anything to product, nothing is happening, we just have the local search updating, which is what we want, we want this input to update as fast as it can locally. And then after some delay, we want to actually update the URL with the value of the search.
And to do that, the last thing that we need to do is reintroduce our use effect. So we're going to do use effect like this, we're going to pass it here a function like this. Here as the dependency array, we're going to pass the bounced actually, wait, we need to do one more thing, right, we need to use our D bounce, we're going to do const, the bounce search like this use the bounce, and we're going to pass it to your local search.
And actually, we made a mistake here, we need to put search, we need to default and sync the local search with the search. So whenever we're creating this component, we are going to use the value from the URL. That's why we have it there.
That's why we created this custom hook in the first place, we're going to use that value in the URL, we're going to pass it here to our local state to be used as the initial value. And then from that point on, we're going to take over the actual modifying of that value. And we're going to handle it ourselves manually.
And again, the only reason we're doing this is because we want to have two different states, one that is local one that is only for the component to actually see the updates in real time. And the other one for the URL, which we get to control and change at a later point. So then here, we're going to pass the bounce search like this.
And inside of here, all we're going to do is we're going to do set filters. And we're going to do search. And that is going to be debounced search like this.
So what we've done, we created this local search over here, once again, just for this input, this is going to work correctly with the input, the input receives the local search as a value, and then on change only updates that local search. And then we're using the use debounce hook, which is listening to local search, it is then going to delay the update and store it inside of this debounce search. And then we're using it here to actually call it to our set filters, this is going to then set it and commit it to you to the URL, which is going to trigger all of the other functionality.
We're only doing this because we want the local search and the search in the URL to not be in sync and to have different values. So we have to do this, we have to add this complexity to our component. So now I can come here to my input, I can actually change.
And as long as I'm changing, notice that the input itself is actually changing, I'm just doing it super fast. But as soon as I stop changing it, then does the URL actually change, right? Again, I can type anything, the URL is not in itself changing, as you can see here, the moment I stop, then that change gets committed to the actual URL, right.
So we have two different state variables for two different purposes. But they're synced together in a way that we control. That is why we're using this code over here.
I hope that you get it. And that's it. With this, you've actually learned a lot in this video, you've learned how to correctly create a custom hook, put all of the URL related functionality to it, you've learned how to get and derive your state from the actual URL, and then set it in the URL over here.
You've also learned how to use callback whenever you're putting functions that have custom hooks that are meant to be reused, which is a great thing to always do. And then we've simplified this component over here by just pulling the values from the URL through the custom hook, we've added our own custom functionality over here, which again, we had to, and we've made our app component really simple, but with the same functionality, right, that is a sign of a good developer, that is the sign of efficient code. And that is what you should do as a developer, you should always strive to keep things very simple to improve things as much as you can and to write good and clean code, which this is a great example.
And what I would recommend that you do is you take this code, you can find the repository for it in the description, play around with it, see how this works, really try to understand it because there's a ton of lessons to learn here and hopefully that is going to make you a better React developer. If you enjoyed this video and you want to see more videos just like this one, make sure to leave this video a big thumbs up. You can also click here to subscribe or you can click here to watch a different video of mine that YouTube seems to think that you're really going to enjoy.
And with that being said, my name has been Darius Cosden, this is Cosden Solutions. Thank you so much for watching and I will see you in the next one. Ciao, ciao.
