The Best React State Management Solution Has Been There All Along

if you're using the use statehook to filter data similar to this inside of react you're actually doing it wrong that's because this gives your users a horrible experience for example let's say I'm typing in some filtering information I accidentally click on the home link well I'll just click back and go back you'll notice all that filter in our head is completely gone depending on how complex your filtering is this could be a huge detriment to your users also if I wanted to share a page that has a filtered list with someone I have no way to do that so instead all this data should be stored in the URL in this video I'm going to show you why that is and how to really easily implement it foreign Dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner I already kind of showed you the problem with this but I'm sure you've ran into sites before where when you're trying to filter something it's not actually stored so when you refresh or do something else you lose all that data and it is incredibly frustrating so the easiest way for you to fix this is going to be taking everything out of state and instead of putting it into the URL now you could handle this manually by doing like window.history and pushing in information to the state and stuff like that but 99 of the time if you're working at react you're using a router of some form whether it's the next JS router the react router or some other router in our case we're going to be using react router I'm going to show you just the dead simplest way to implement this so the very first thing we need to do is obviously remove our state since we no longer want to store this in state we want to store it in the URL and the best way to get information from the URL and save it in the URL is with the use search params hook so we can use this use search params hook and it takes in a default value so in our case we want our Q property to be an empty string and our only computer items to be the Boolean false just like that so now we have our information and this gives us two props just like a normal use State hook this is going to give us our search for Rams and it's going to give us our set search params as well so we can just set that like this so now we have our search params and this is just a URL search params object so I can use like the dot get method I can say I want to get the Q object from here so in our case I'm getting that empty string so I can say const Q is equal to that I can do the same exact thing here I can get that only computer items property from here I can set my only computer items variable now one minor downside to doing this is that everything in search params is stored as a string because obviously anything I put in my URL is going to be a string so I need to convert these from strings to the type that I care about so this is going to be a string that is either true or false so in our case I just want to check to see if is equal to the string true if so I'm going to use it as true otherwise it's going to be set to false so that's all that I need to do for this inside of here I just have some code that's just filtering the items this code doesn't really matter it's just the filtering code so that doesn't matter all that matters is how we store this information so here on our on change we need to modify this so instead of storing an in-state we store it in these URL prams so we can call set search frames and what we want to do is we want to get the previous search parameters that we have and all we want to do is I want to add on to that so I can save my previous items I want to set the Q property here I want to set it to my e.target.value and then I'm going to return the previous params just like that so essentially I'm just adding a new parameter onto here I can copy this down and do the exact same thing down here this is going to be the checked property and this is going to be for that only computer items there we go now if I give that a quick save and I just start typing into here for example ke you notice that this is working fine my filtering is still working but the big difference is all the way up here inside the URL you'll notice that it actually has Q equals ke and my only computer items is set to false when I check my checkbox you can now see that this has changed to true now this is really great because if I click on the home button and I click back you can see it brings me back here with all of my filtering information in place there's one downside to this approach that I need to make one modification for that's if I keep clicking back you're noticing it's going back one single parameter at a time most likely when you're filtering you don't want your back button to work like that instead you want to just jump straight to the page you're on before so to fix that problem we can come in here on our search params it actually takes two properties and the second one is some option and we can say that we want to replace the current URL by saying replace true and all that this is going to do is it's going to say hey when I update my URL don't actually make it so when I click back it goes to the previous URL just make it replace the current page 100 so if I do that I'm just going to give my page a big refresh we'll go to the home here we'll go to the store we'll just make some changes into here and then when we click back you notice it brings me straight to the home page instead of just bringing me back one parameter at a time and now if I go forward you can see I'm back here again click on home click back on back to my store here I can copy this URL paste it and now you can see I have all that filtering in there so all my data is in the URL which is my one source of Truth and all of my application just works off of that so it's better for your user and it's kind of better for you because everything's in one single place now obviously you can do this inside of other routers as well so you could do it inside of next you can do it without a router this is just the simplest way to do it in react router these even more complex ways to do it in react router if you want if you're doing things like forms and actions and loaders another thing to keep in mind is if you're storing really complex data like maybe you have an array from like a select that has a multi-select capability making sure you manage and convert all of that from a string to the proper values is a little bit difficult so I'd recommend using something like Zod or some other schema validation library to do all those conversions for you and luckily for you I have a full tutorial on Zod which is popping up on the screen right now and I also have a full react router tutorial that's also on the screen if you're interested in learning more about that with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 161,390

Keywords: webdevsimplified, react router, react state management, react useQuery, react query, react url state, react state in url

Id: oZZEI23Ri6E

Length: 5min 37sec (337 seconds)

Published: Tue Sep 19 2023