Junior Vs Senior Code - How To Write Better Code As A Web Developer - React

it's really hard to know if the code you're writing is clean and well maintainable or if it's got a lot of problems with it so in this video i'm going to show you all the most common mistakes that react developers make and how you can fix those mistakes to make your code cleaner and easier to maintain also if you're interested in diving deep and really learning react make sure to check out my full react course i'll link down in the description below [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 so if that sounds interesting make sure you subscribe to the channel for more videos just like this now to get started i have this folder called react state update open and i have a new advanced and pro folder which contains different levels of code quality and we're going to go through each one individually starting with the new and working our way up to pro i also have use effect and list related changes that we're going to talk about a little bit but first we're going to start with state related changes so if we go into the new folder we have this simple counter application and inside of here all we're doing is we're rendering out the count we have a button to decrease the count and a button to increase the count as you can see on the right side of the screen and this is a huge problem that a lot of people run into with react when they first get started and that's that they try to change the state directly as you can see we have a used state here which takes in our initial account and here we have count and set count and this increment count is just modifying our count it's not actually using this set count to update the state so when we click the plus or minus you'll notice nothing actually happens even though we're changing our count variable and if we inspect and look at our console and we click this plus button and the minus button you can see that our state is actually being saved inside of here and being logged out our count is actually being changed but it's not actually rendering it to our component because we're not using this set count function so let's just change this out for the more advanced version there we go and we can come over to the advanced version and immediately when i click the plus and minus button you'll notice it actually works and changes our state which is exactly what we want that's because we're using the set state or in this case setcount function instead of directly modifying our state and a good way to ensure that you're always using this set count or set state function is to use const to define your state variable that way you're not as likely to change the state variable because it's defined as a constant and if you try to change it you'll get an error thrown to you which will just try to help you remind you that you need to use this set counter set whatever version the function instead of actually directly setting the state itself but this also has a few problems related to it if we just inspect our page over here go to the console and we click plus you'll notice that the account being printed out is actually whatever the count was before see it prints out zero we click plus again now it prints at one even though our account is actually two and the reason for that is that this setcount function is actually asynchronous it runs in the background so we call setcount and it doesn't actually change our account yet and then we log out our account so our account hasn't been changed yet because this runs asynchronously so we need some way to be able to figure out that we're actually changing our count another thing about this advanced version that i like much better than the previous version is that you'll see down here we're using prop types and we're saying that our initial count must be a number and this is really important because if by accident we pass in here the string 1 instead of the actual number one to our initial account which is something that's very easy to do and we save you'll immediately see that we get an error in our console saying that initial count is of type string and it should be of type number which is great because if we click plus you'll notice we're doing string addition instead of actually number edition so we're just adding a one to the string instead of adding the number one to one so it's really important to have these prop types set up to make it really easy to figure out if you have an error like that because it'll show up right in your console let's just change this back to the number one and now the very last thing that i want to talk about is this is actually flawed because if we were to do set count of you know one twice here let's say we want to add two and we want to subtract two every time we increment and decrement we save and click plus you'll notice it still only increments by one and that's because we're not actually getting the real count variable when we're trying to set it so i'm going to go over to the pro version now and show you how we can fix that let's just jump over and make sure we render out the pro version save that and let's look at what this code looks like you'll notice a lot of things are very similar we have our state being set up the same we have our button being rendered the same our prop types are the same but one major difference you'll notice is here in set count we're passing it a function instead of passing the value the reason for that is any time inside of your state that you're modifying the actual state variable based on the previous state so in our case we're modifying our count based on whatever the count is currently so we're getting our current count which is passed to this function and then we're adding one to that instead of using the count variable here so instead of having count plus one like this we're using this function version which gives us the current value of count no matter what so now even if we were to call this twice and we want to add two and subtract two now when we click plus you'll see it's properly adding two because it first calls set count and it'll give us our current count of one for example adds one gives us two and then when it gets to this second set count our current count is now two so two plus one is going to give us three so it's properly adding and subtracting by two each time another thing you'll notice is these console logs are actually removed from our increment and decrement count and instead it's put inside of this thing called use effect and if we inspect our page go to our console clear this out here and click the plus icon you'll notice it properly logs out too which is our current count if we go down by one you'll see it logs out one and it's no longer behind and the reason for that is use effect is going to get run anytime these dependencies change so anytime anything in this array changes it reruns our use effect so in our case any time our account changes we're logging out our new count and this is done after all of our count changes are done so that's why we're able to get the updated fresh count value as opposed to when we had the console log up here this was not giving us the current value of the count because it's obviously happening asynchronously the set count happens later after this console log it runs so that's why we need this use effect in order to do that the big takeaway from this section is really just understanding how state works and react how you can update state and react and how the asynchronous nature of setting the state works once you really understand that it becomes so much easier to work with state in ways that don't cause weird bugs that you don't expect like in for example this first example or here where we had two set counts in a row if you just understand how state works and when to use the function version when not to it becomes so much easier to work with now let's move on over to our next example which is going to be this react use effect so let me just close out here get into that folder and let's just start up our application and essentially inside of here what we're focusing on is really how use effect works and how we can purposely use use effect in order to do exactly what we want so again we have different versions the noob advanced in pro i'm just going to comment out everything but the new version zoom this out and as you'll see here we have a text box to enter information as well as a button which is allowing us just to toggle the color of this button from black to white and inside of here let's see exactly what our code is doing so we have state for our name we have our dark variable which is the state related to that button and then we have this user which is our age and name so our age gets passed in through the props as you can see in here we're passing that prop 25 over into our user and then we have this button style which is just you know a variable that's determined based on if the dark or light value is set to true just determines our color of our button text and the background color of our button and then we're just applying all that in our input we have our value and our on change our button has that style being applied and when we click on it we just toggle that variable and we're making sure to use the correct version of setting our state by using the current value instead of just saying that we want to invert this dark variable we're actually getting the current value by using that function version and again we have prop types down here which is great to use but there's quite a few problems with this code it looks good on the surface it seems like everything is working and we have this use effect here which is logging out our user for us every single time our user changes and if we inspect just clear out our console here and refresh our page we're going to notice a few things immediately we can ignore these warnings because they're related to the other sections of our code so we'll just clear this out and if we start typing in here you're going to notice we immediately get a warning and that's just saying a component is changing from uncontrolled to controlled because it started out with an undefined value and now it has a defined value and this is a huge problem a lot of people run into so you'll see here we set the value to our name and our name is by default undefined because we don't pass anything to use state and when you pass undefined or null to the value inside of a react component along with an on change this value is saying okay if you pass in null then this is an uncontrolled component which means react really doesn't control it it lets the browser do all the normal controls while if you pass it a value and an on change it's saying okay now you have a controlled component in which you have to manually set the value every single time it renders so we're going from uncontrolled to controlled which is a big no no in react you definitely don't want to do that so to get around this you always want to make sure that you're passing an empty string here as a default value for your inputs instead of null because that way when you come in here we clear this out and we start typing we're no longer going to get that error because we have a default value of an empty string which is not null or undefined so this is saying okay this is a controlled input all the way from the beginning and this is something that a lot of people do incorrectly and it's a super easy thing to fix also you'll notice whenever we change our user's name it outputs our user which is exactly what we want but when we toggle our theme you'll also notice it's logging out our user we only want to log the user when it changes and the reason that this isn't working is because of the way our use effect is set up in order to make sure something only renders in a use effect when you want it to you need to make sure you pass a dependency array that includes all the things that you need to work for when it changes so when our user changes we want to run this use effect now if we save this you may think that we solved the problem but we actually still have the exact same problem you see everything works fine but when we toggle our theme it still prints out our user the reason for that is a little bit tricky but essentially what happens is every time this component renders we create this user variable here which is an object and this is a brand new user object so our old user object is actually different than our new user object even though they have the same values inside of them the age and the name are exactly the same the actual reference of those objects is different these are two different brand new objects so they don't actually equate to each other so that's why this use effect is not working so i'm going to take a look at the advanced version and show you how we can fix that over here in the advanced version you'll notice everything is exactly the same we have that use state with our default value everything is the same here everything's the same here the one major difference you're going to notice is our use effect now has name and age inside of it so if we just save this and go over to our app and make sure that we render out this advanced version there we go this is our advanced version let's inspect our page go over to our console just see if this works we start printing out okay that works and when we toggle our theme you notice it doesn't actually change and log out our user so that's exactly what we want you'll notice we get a warning up here in react it says react hook use effect has a missing dependency user either include it or remove the dependency array and essentially what this is saying is inside of this advanced component we're using this user variable inside of our use effect but it doesn't appear inside of our dependencies here so it's saying hey maybe you made a mistake because you are using user but you don't have it in your dependencies and essentially what we're doing is we're circumventing that because age and name are the only two things inside of our user so we're just putting them here saying if age or name change we know our user changed so we're kind of telling ourselves that we know that this works but it'd be much better if we could just put user here because what if we add a new property to user such as you know birthday for example and now whenever birthday changes we also want our use effect to run but right now we'd have to remember to put birthday inside of here and while right now that's really easy they're quite close together this could be something where user gets passed in from another component maybe six you know parents up and remembering that way down in this child is going to be nearly impossible so it's much better if we're able to just put user inside of here and then have the user take care of if it needs to create a new user and remember if it's the same as the old user and that is what the pro version of our code does so let's open up our pro version real quick here and make sure that we render that out inside of our app there we go so inside of this pro version a lot of things are very similar everything up here is essentially the same this is the same all the stuff down here is the same but our use effect now has a user inside of the array and if we come over here and inspect our page you'll notice that if we just close this out we change our user it properly updates but when we toggle our theme it doesn't render out new users to the page so we know that it's working just the same as this advanced version when we had name and age we have user in here so how exactly is that working well what's happening is up here on this line let me give it a little room to breathe so we can take a look at it what you can see here is we have something called use memo what this use memo does is it essentially says here's some dependencies as the second property and whenever any of these change i want you to rerun this function and return whatever's inside of it and set it to this variable here so essentially here we have a function right here and this function just returns a new object that has the age in the name so it's just returning our user object as you can see this section up here age name this object is essentially what we put inside of our used memo and then the second parameter of used memo is the things that we want to check whenever the name or the age changes we want to rerun use memo and return to us a new object so what happens is when this component renders if name and age did not change use memo was going to return to us the same user we had the last time we rendered our component which means that the user here is going to be the same as the user down here because they are both the exact same object the exact same reference it didn't have to create a new object it used the old object from the last render so these two are going to be equal to each other that's why we can have the user inside of our use effect here and when we toggle our theme it doesn't actually reprint out the user because this use memo is not giving us a new user it's giving us the same user as is already defined down here now this may seem really confusing especially if you aren't super familiar with reference versus value so i have a video on pass by reference versus pass by value i'll link in the cards and description you can check out and it'll explain all this in much more depth now finally i want to talk about the last big place that people make mistakes in react and that is with list so let's just back out here to that list and let's just make sure we start this up oops make sure we cd into that there we go npm start and this is just going to run this and essentially what we have here is a very typical to-do list application close out of all these and we'll open up this new version first and make sure in our app all we're doing is rendering out the new version as you can see here we have a list of to do's which have an id a true false for complete as well as a name saying exactly what that to do is as you can see rendered over here and we're just passing those into each of our components and now if we go inside of this to-do's this is our new to-do's here as you can see we get that initial list of to-do's we're passing that to use state so we have our to-do's here as well as we have our selected to do we scroll down a little ways to hear where we're rendering we're just looping through all of our to-do's passing them to a new component as well as passing some functions that we can use to toggle the to-do as well as select the individual to-do we want to do and then we're rendering that selected to do down here then inside of to-do this is going to be pretty straightforward and the same for all of our components all we're doing here is toggling complete so we're just passing the id of the to-do we want to toggle complete to as well as selecting we're passing the id of the to-do we want to select and in here we're just rendering out our tattoo and we have an input that says it's checked if it's complete and all that on change just toggles out to do whenever we change our input so if we toggle our to do here click it it's going to change the actual you know checked state of our to do by calling this toggle complete function but there is an error here you can see when i click these check boxes it's not actually doing anything the select is working it's popping up whichever one i select down here on the bottom but this is not doing anything when i click these check boxes and the reason for that is a huge mistake people make when they're dealing with modifying arrays instead of state in that here we have our set to do's which is toggling our current to do that we click on based on this id so here's our list of to-do's and what we're doing is we're getting the to-do based on our id so we're just saying current to-do's dot find get the id or get that to do based on that id and then all we're doing is toggling the complete of that to do to be the opposite of what it currently is essentially we're just flipping the to-do complete to be either true if it's false or false if it's already true and we're just returning our current to-do's the problem with this though is we're directly modifying this variable this current to do is because we're getting a to-do from it and then directly modifying that and when you're dealing with the react you never ever want to directly modify state as i showed up here in these state examples what you want to do instead is actually return a brand new array as a brand new array is going to contain the updated to do instead of returning the same array with modified variables inside of it that's why as you can see over here none of these check boxes are working so let's move on to the advanced version to see how that works we'll comment this out get the advanced version in here and let's make sure we open that up this to do component here is essentially exactly the same nothing inside of here is changed at all but inside of our to do's component you'll notice this function up here for toggling complete is actually changed a bit and you'll notice also when we click our checkboxes they actually all work and the reason for that is what we're doing is we're calling the map function and the map function loops through our entire array of to-do's and returns to us a brand new array without changing anything inside of the current array and that's exactly what we're doing as you can see here we're checking to see if we have the current id and if we do have that current id instead of modifying our to-do we're creating a brand new to do so a brand new object that we're creating and returning in place of that current object we're never ever modifying anything inside of current to do's and that is why this is able to work over here because we're returning a brand new array without modifying anything in the existing array at all another important thing if we scroll down here a little ways is you'll see we have a key being passed to our to-do if we inspect our page and we just go over to console clear this out and if we get rid of this key and save you'll notice immediately we get each child in a list should have a unique key prop and what this is doing is inside of react we have this key prop here whenever a object changes it can look at the key to see if it needs to re-update that object and it can do just one element in our array and update that instead of updating every single element in the array because if our array changes but only one of our to-do's in the array changes we don't need to re-render every single to-do we only need to re-render the one with the key that changed so having keys allows you to really quickly and easily make sure that you only re-render components and change components that need to be re-rendered and it really helps out with performance instead of react so it's always recommended you have keys anytime you do any form of listing looping or mapping so inside of this example we essentially have fixed this key problem we fixed this problem with handling the toggling of complete of our to-do's but we actually have another problem if we select it to do and we check our to do up here you notice it does not check our to do down here even though they're both the exact same to do you can see that because when we click the check box down here it's actually toggling our to-do up there it doesn't matter what to do we have selected it works for all of them and this is kind of weird you would think if this to-do appears toggled the one selected down here should be toggled because they should be the exact same to do but what's happening is we're committing the very typical sin of storing derived state inside of our state so we can see who we have a selected to do which derives from this array because this to do right here is from this array but we're storing a copy of that to do inside of this state so now we have our to-do's here and we have a copy of one of those to-do stored here so when we update the to-do in this list we're not actually updating this copy instead of copying this what we want to do is get a reference to it so that they both are the exact same object so let's jump over to the pro version and let me show you how that works inside of our app let's render out the pro version and we'll open up that pro code immediately let's first just select something and we click down here you notice it updates both of our to-do's at the same time it does this for all of our to-do's and it does it for both the check boxes this is really useful because now these are both referencing the same object and how exactly does this work well it's a very straightforward change all we're doing is instead of storing a copy of our to do in state we're storing just the id of the to-do that we've selected and then we're getting the current to do from this list of to-do's so we're getting that same exact object we're not getting a copy of it we're getting the exact same reference so what we're doing in state is we're making sure that we're not storing derived state we're storing the values we need in order to get this derived piece of state and this derived piece of state just gets recalculated every single time we render our component so now if we change our to-do up here it doesn't matter because we just have our id stored we don't have any copies of the value stored and it's getting the same selected to do from our list of to do's that's already changed that's why when we check these check boxes it updates it in both places at once this idea of derived state is a fairly complex topic a lot of people mess up so i actually have an entire blog article on the topic i'll link down in the description for you to check out other than that one minor change though pretty much everything else inside of here is exactly the same there's really no other changes to worry about and those are all the major react problems i see developers make if you enjoyed this video make sure to check out my full react course linked down in the description below thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 84,801

Rating: 4.8987341 out of 5

Keywords: webdevsimplified, junior vs senior dev, noob vs pro code, how to write better code, how to programmer better, clean code, clean code js, clean code javascript, write clean code, how to write clean code, how to write code, the best way to write code, how to program better, how to be a better programmer, senior dev vs junior dev, junior dev mistakes, junior developer javascript, javascript, react clean code, junior vs senior react, reactjs, js, web developer, react best practices

Id: 0yzoAbrjV6k

Length: 21min 48sec (1308 seconds)

Published: Tue Oct 06 2020