Most Beginner React Developers Do This Wrong

Key Takeaways

in this video I'm going to be showing you how to build a simple search bar for filtering list in react but not only just that I'm going to show you the proper way to handle derived State and memoization inside of react and this is the perfect project for doing that so if you're unfamiliar with derive State you definitely want to stick around for this video [Music] welcome back to web 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 and to get started we first need to run npx create react app and it's going to create a basic boilerplate react application for us now to explain what we're doing in this application you can see on the right here the working version of our application we can add new items to a list right here you can see they show up down here and then we most importantly have this search bar at the top where I can type in any value and you can see it's going to filter the items in my list to only the items that actually match what I type in this search bar this is where all the concepts around derive State memoization and other state management techniques come in and that's the most important part of the entire video we most likely won't get to it till the very end so I'd recommend sticking around at least until we get to that point in the video so once this command finishes running it's going to create all of our react application code for us and we can pretty much delete everything that we don't need so I'll come back to you as soon as that finishes there we go that just downloaded everything and if I run npm start you can see that that's going to run the application for us with all the code inside of here now we don't need all the code that's inside of here so we can get rid of quite a bit of it we'll close out of the old version of application and inside here I want to get rid of all the CSS files that we have all the test files this logo this stuff with web vitals as well as my test right here and inside of my index or JS I just want to make sure we get rid of all those things that we removed so we essentially just have this very basic version of our app here and inside of here get rid of everything and we're just going to return the text I and now when I save and this repot compiles over here you'll be able to see that we actually have that information showing up just the text high now with that out of the way the first thing I want to do is just render out the jsx for our form it's going to be very straightforward because this is not the important part of the video so this is just going to say search here and then we're going to have an input field which is going to have a type of search just like that we can close that off so that's going to give us the search field that we need the next thing that I'm going to want to do is I'm going to want to have a way to actually you get new information that's going to be inside of a form and inside this form it's going to say new item just like that and we'll put a space after that there we go and then what I want to do here is have another input and this input is going to have a type of text for printing out our new item and then finally we're going to need a button that says add just like that so now we have our new item and we have our add button and we can just put in a couple line breaks here so we can say we're gonna have a couple line breaks just to give us some space let's put inside of here just an H3 that says items and then below that is where we're going to render out all of our different items so that's our basic boilerplate code now what we need to do is add the state for our items so let's come in here we're going to use our use statehook so we're gonna have items and set items is equal to use State and by default I want to set that to an empty array let's import that so now we actually have our items we can render those out to our screen down here by saying items.map over each one of our items and we just want to return a single div that has the text of our item inside of it super straightforward stuff so for example if I had one thing in my list that said hi and now I save you can see that that's being printed out and if we have another item it'll just show up right below that super straightforward stuff so now let's add the ability to actually add information to our list so we can come in here on our form and we can say on submit is going to be equal to on submit so whenever we submit our form which with this button right here if we give it a type of submit now that is going to be able to submit our form every time we click the button or we hit enter inside of this list it's going to call a function called on submit so let's create that function take in that e parameter we're going to make sure we prevent the default and that's just going to make sure that our form doesn't refresh our page without this our code won't work properly next thing we need to do is actually get the information from this input right here so I'm going to give it a ref and a ref just makes it so it's easy for me to access this exact input element so we can just say input ref here and at the top of our page we can say const input ref equals use ref now if you're unfamiliar with refs I have a full react hooks course it's completely free I'll link it in the description for you for more information on it but essentially just allows us to access this input element so inside of here we can say input ref.current dot value and that's going to give us the value of the input element so let's just say const value is equal to that there we go and then if our value is equal to an empty string well in that case I just want to return because we don't actually have an element otherwise if it's not an empty string then what I want to do is I want to set our items and I want to add this new item so I'm going to get all the previous items essentially all the items we currently have and I want to return all those items plus the new item which is just our value added to the end now if you're unfamiliar with this function version of the use statehook again that's covered in my free react hooks course link down in the description below for you so now if I say that we can actually add items to our list for example if I type in one hit enter you can see that adds it down here but it doesn't delete the input element value so what I want to do is also delete that value so I can just say input ref dot current dot value I'm going to set that to an empty string so now if we just refresh our page here and I type in one hit enter you can see it deleted it so I can type in 2 3 and so on and it's going to add items to my list every single time I make changes which is great so now up until this point all we've done is created essentially a list we can add items to but now what happens when we want to filter that list with our search bar up here I'm going to show you two different approaches to do it one is like the naive approach that most people do and the second approach is going to be the correct approach that deals with derived State properly so inside of our input let's just come in here with an on change event and this on change event is going to call some kind of function we'll just call it on change there we go function on change takes in an e parameter an e dot Target dot value that's going to be the actual value of our search input so we can use that value to filter our list if we want so what we could do is we could say set items oops items get our previous items and what I want to do in here is just return a filtered version of that list so I can say previous dot filter and I want to filter each item where the item dot to lower case includes this e.target.value so we'll just set this to a variable called value up here and we'll just say it includes value.2 lowercase just like that so essentially all I've done with this one line of code is I've converted both these values to lowercase just to make sure that Capital versus lowercase letters don't make a difference and then I'm saying hey does the thing we typed in is it included inside of our actual item so does our item have that text inside of it if so return that item otherwise don't return the item so now what I can do is if I come in here and I type in the O character you can see that one and two both show up on the list because they both have an O inside of them if I type in on you can now see only one shows up what happens when I delete and go back to just o you can see that only the item one is in my list and even when I clear out my search filter only the item one is in my list and that's because what we're doing with our code is we're essentially overwriting our list of items with this new list of filtered items so every single time we type in our search bar we're changing our list of items and essentially deleting all the items that don't match our search query which is obviously not what we want so let's look at a second approach that people may do which again is a naive approach but it gets you one step closer to where you want to be and that is to store your items inside of a separate state so we can come in here and say filtered items and we could say set filtered items and that's going to both be equal to an array so down here instead of setting our items let's do set filtered items instead and the set filtered items is going to come from our full list of items so we can just change our code slightly we don't need the function version of this anymore instead we're just going to take all of our items and we're just going to filter them like this so now if I make sure that I have all my closing brackets in the correct location there we go that should work and now what we want to do down here instead of listing out all our items we're just going to list out our filtered items only okay so what we can do is we can do a simple item adding some items so we'll say one two and you can see that these are not showing up properly already so one thing that we need to do is every time we add an item we also need to add it to our filtered list of items so up here we would need to essentially call set filtered items to add that item in there as well so now if I add an item you can see that is being properly added into that thing and now when I do a search for example if I type in O you can see that it's showing all the things that have a 0 inside of them and if I just do a quick refresh those items are showing up because of some caching that was happening now if I type in O you can see it's only showing the items with o o n it's only showing those items and we delete now we're back to two and so on now this looks like it's working fine but the big problem is is that we're now storing the same information in two places in our state we have our overall list of items right here and then we have our filtered list of items which has the same items in it as our overall items list they share the same data between them which is why we had to do this ad twice and if we for example edited information in our items list well now we would need to edit that same information in our setting of our filtered items so every single time we change our items we need to change our filtered items and if you have this type of code inside of react it's almost always a problem that deals with derived State and essentially what that means is you're storing state that can be derived from other state values and you should never do that inside of react so now I'm going to show you the final third way to do this which is the correct way and the way that I would handle this problem so let's get rid of this filtered items get rid of this extra Setter and inside it here on our on change we can actually completely remove that too because what we're going to do is we're going to store the value of our input so we're going to have this value we're going to call it query and that's going to be its own State value up here so we can say query set query and that's just going to be equal to an empty string like this and now down here I can say on change get that e value and I can say set query to e.target.value so what this little line of code has done is it means every time I type in a value for our query it's going to show that right here and down here let's just print out our list of items for now so if I type into the search query you can see it's working just fine but it's obviously not doing any searching for example if I type O nothing actually happens or on you can see nothing's happening at all that's because we're not actually filtering our list of items but we've done something really important we've stored our overall list of items in our state and we've stored our query for what we want to search for so now with those two pieces of information we can actually derive our list of filtered items without having to store it in State anywhere so I can say const what's the const filtered items is equal to and I can take our items and I can just filter them just like we were doing before with our filtering code so I can say for each item what I want to do is change that item to lower case and then I want to see if it includes our query dot to lowercase just like that and that's going to give us our filtered items and I can use that all the way down here so now let's actually test this we'll say one two and a medial notice it's not quite working let me just scroll up here to make sure why I should make sure I return this and that should be all we need to do so now you can see our items we're showing let's just do a refresh so we have item one two three and now if I type in a zero here you can see it filtered down the items if I have on you can see it filter them again and as I remove things it adds those elements back onto the page this in my opinion is the best way to handle this because you're only storing the least amount of information in your state none of it overlaps with each other and then you're just using that state to get the new value that you need now depending on the size of your list and the other requirements of your application doing this calculation every single time your page re-renders could be time consuming and costly on performance so you could wrap this inside of a used memo and by doing that you're essentially saying that you only want to run this code right here every single time certain parameters change we can pass those parameters in so we can just come in here and say that the parameters that we actually care about are going to be our items and our query so now with this one line of code if I make sure I import use memo it's just saying that only re-update our list of filtered items anytime our overall items or our query changes so now if we have one two three and I just type in you know oh here you can see we get one but now if I say other you can see that they get added down here as well this would work just fine with our old use case but now if you have other state in your application besides just these two values and you update those it's going to make sure this code doesn't run a second time if it doesn't need to and if you're confused on why that's working again I cover this use memo hook in my free react hooks course which will be linked down in the description below really the key point to take away from this video is how derived State works if you have state that's stored using a state hook that is derived from other state values or shared between different state values that's almost always a sign of bad code that is going to be difficult to maintain which is why you should always take derived State such as this filtered list of items move it out of your actual State and just calculate it based on your state values this is a skill that's tricky to hone but with practice I guarantee you're going to be able to perfect it and write out cleaner code because of it now as I mentioned multiple times in this video I have a completely free react hooks course that's going to be linked down in the description below I highly recommend you check that out to learn every single react hook you need to know and again it's free which is amazing with that said thank you very much for watching and have a good day